當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

HTML和JavaScript代码分离、平稳退化（1）

發(fā)布時(shí)間：2025/6/17 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML和JavaScript代码分离、平稳退化（1）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

使用的編輯器是Hbuilder，瀏覽器是Chrome。

HTML和JavaScript代碼分離，會(huì)使得修改網(wǎng)頁(yè)功能和代碼的閱讀與維護(hù)會(huì)輕松的許多，不用在DOM中閱讀大量的JavaScript代碼。

文中主要是一個(gè)圖片庫(kù)的實(shí)現(xiàn)，是在學(xué)習(xí)JavaScript DOM編程藝術(shù)一書時(shí)的隨筆，如有理解不對(duì)，或是有明顯錯(cuò)誤的地方還請(qǐng)指出。

HTML的代碼部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/1.png" title="shi lai mu">史萊姆</a>
</li>
<li>
<a href="images/2.png" title="long wang">龍王</a>
</li>
<li>
<a href="images/3.png" title="qi mu nan xiong">齊木楠雄</a>
</li>
<li>
<a href="images/4.png" title="1988">1988</a>
</li>
</ul>

<script src="showPic.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

JavaScript代碼部分：

//DOM讀取完即加載
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

//增加多個(gè)window.onload
function addLoadEvent(func) {
var oldonload = window.onload;//將window.onload中的函數(shù)賦給oldonload
if (typeof window.onload != 'function') {//如果window.onload不是函數(shù)類型，即其中沒有函數(shù)則將需要onload的函數(shù)賦值給它
window.onload = func;
} else {//否則將兩個(gè)函數(shù)合并
window.onload = function() {
oldonload();
func();
}
}?
}

//插入到目標(biāo)元素后面
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;//獲取目標(biāo)元素的父節(jié)點(diǎn)
if (targetElement == parent.lastChild) {//如果父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)是目標(biāo)節(jié)點(diǎn)，則直接添加新元素節(jié)點(diǎn)
parent.appendChild(newElement);
} else {//否則將新節(jié)點(diǎn)加在目標(biāo)元素的后一個(gè)節(jié)點(diǎn)之前，即放在目標(biāo)元素之后
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

//預(yù)加載imagegallery中的屬性元素
function prepareGallery() {
if (!document.getElementsByTagName) {
return false;
} //驗(yàn)證getElementsByTagName是否可以使用
if (!document.getElementById) {
return false;
} //驗(yàn)證getElementByID是否可以使用
if (!document.getElementById("imagegallery")) {
return false;
} //驗(yàn)證“imagegallery”id是否存在
var gallery = document.getElementById("imagegallery"); //獲取id名為“imagegallery”的數(shù)組
var links = gallery.getElementsByTagName("a"); //獲取數(shù)組里的“a”標(biāo)簽數(shù)組
for (var i = 0; i < links.length; i++) { //對(duì)“a”數(shù)組遍歷并逐個(gè)操作
links[i].onclick = function() {
return !showPic(this); //平穩(wěn)退化
}
//links[i].onkeypress = links[i].onclick; //沒有也行。。。
}
}

//初始化占位符的相關(guān)屬性
function preparePlaceholder(){
if(!document.getElementById) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById("imagegallery")) return false; //判斷是否可以使用這些函數(shù)以及ID

//新建占位圖片設(shè)置占位圖片的屬性節(jié)點(diǎn)
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "images/6.png");
placeholder.setAttribute("alt", "my image gallery");

//新建占位字符設(shè)置占位字符的屬性節(jié)點(diǎn)和文字節(jié)點(diǎn)
var description = document.createElement("p");
description.setAttribute("id", "description");
var txt = document.createTextNode("Choose an image");
description.appendChild(txt);

//找到圖片列表并將占位圖片、占位文字依次放在后面
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}

//主要體現(xiàn)平穩(wěn)退化思想
function showPic(whichpic) {
if (!document.getElementById("placeholder")) {
return false;
} //驗(yàn)證“placeholder”id是否存在
var source = whichpic.getAttribute("href"); //獲取被點(diǎn)擊的鏈接的目標(biāo)地址
var placeholder = document.getElementById("placeholder"); //獲取占位圖片的元素ID待操作
placeholder.setAttribute("src", source); //將獲取到的被點(diǎn)擊的鏈接地址賦值給占位圖片的鏈接地址

if (document.getElementById("description")) { //判斷“description”id是否存在，不存在則不做操作，存在則修改，屬于錦上添花，代碼不執(zhí)行無(wú)較大影響
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //確定被點(diǎn)擊鏈接的title值，沒有則賦為空字符
var description = document.getElementById("description"); //獲取字符占位符
if (description.firstChild.nodeType == 3) { //判斷子節(jié)點(diǎn)的類型是否為字符節(jié)點(diǎn)
description.firstChild.nodeValue = text; //將被點(diǎn)擊鏈接的title值賦值給占位符的字符節(jié)點(diǎn)
}
}
return true;
}

css代碼部分：

body{
font-family: "helvetica", "Arial", serif;
color:#333;
background-color: #ccc;
margin: 1em;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none ;
}
ul{
padding: 0;
}
img{
display: block;
clear: both;
}

復(fù)制到編譯器需要整理代碼格式。

轉(zhuǎn)載于:https://www.cnblogs.com/sakuraneo/p/10898785.html

總結(jié)

以上是生活随笔為你收集整理的HTML和JavaScript代码分离、平稳退化（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

javascript

HTML和JavaScript代码分离、平稳退化（1）

總結(jié)