JS DOM 程式設計藝術(第2版)讀書筆記 第12章 綜合示例
阿新 • • 發佈:2019-02-15
/** * addLoadEvent */ function addLoadEvent(func) { var oldonload = window.onload; if(typeof oldonload != "function"){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } /** * insterAfter */ function insertAfter(newEle, targetEle) { var parent = targetEle.parentNode; if (parent.lastChild == targetEle) { parent.appendChild(newEle); }else{ targetEle.insertBefore(newEle, targetEle.nextSibling) } } /** * addClass */ function addClass(ele, value) { if (!ele.className) { ele.className = value; }else { ele.className = ele.className + " " + value; } } /** * highlightPage */ function highlightPage() { var nav = document.getElementsByTagName("nav")[0]; var links = nav.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { var url = links[i].getAttribute("href"); if (window.location.href.indexOf(url) != -1) { links[i].className = "here"; } } } addLoadEvent(highlightPage); /** * photos */ function prepareGallery(){ // 檢測物件或方法是否存在 if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.getElementById("imgBox"))return false; var gallery = document.getElementById("imgBox"); links = gallery.getElementsByTagName("a"); for (var i = 0, l = links.length; i < l; i++) { links[i].onclick = function(){ // 巧妙的運用showPic函式的返回值 // return showPic(this) ? false : true; return !showPic(this); } //links[i].onkeypress = //links[i].onclick; } } function showPic(obj) { // 物件檢測 if(!document.getElementById("placeholder")) return false; /* * 獲得當前物件的href值,如安裝有本地伺服器: * IE6和IE7返回 "http://localhost/images/Koala.jpg" * 標準瀏覽器返回 "images/Koala.jpg" * 為了然所有瀏覽器都返回一致的結果,給getAttribute()新增第二個引數為2. * 謹記:getAttribute("href")和getAttribute("href", 2);瀏覽器相容性。 */ var url = obj.getAttribute("href",2); var place = document.getElementById("placeholder"); place.setAttribute("src", url); if(document.getElementById("description")){ var text = obj.getAttribute("title"); var description = document.getElementById("description"); // firstChild必須存在,也就是說 <p id="description">這裡必須有內容</p> 下面這行程式碼才有效。 其實這種情況常用 description.innerHTML = text; description.firstChild.nodeValue = text; } return true; } function getHTTPObject(){ if(typeof XMLHttpRequest == "undefinded"){ XMLHttpRequest = function(){ try{return new ActiveXObject("Msxml2.XMLHTTP6.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP3.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} return false; } } return new XMLHttpRequest(); } /** * readyState: * 0 表示未初始化 * 1 表示正在載入 * 2 表示載入完成 * 3 表示正在互動 * 4 表示完成 */ function getNewContent() { var request = getHTTPObject(); if(request){ request.open("GET", "example.txt", true); request.onreadystatechange = function(){ // 指令碼依賴伺服器的響應必須放到這裡 if(request.readyState == 4){ var p = document.createElement("p"); var txt = document.createTextNode(request.responseText); p.appendChild(txt); document.body.appendChild(p); } } request.send(null); }else{ alert("sorry you browser does't support XMLHttRequest"); } alert("Function Done"); } addLoadEvent(getNewContent); /** * moveElement */ function moveElement(elementID, final_x, final_y, interval) { var elem = document.getElementById(elementID); var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (elem.movement) { clearTimeout(elem.movement); } var dist = 0; if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x){ dist = Math.ceil((final_x - xpos) / 10); xpos = xpos + dist; } if (xpos > final_x) { dist = Math.ceil((xpos - final_x) / 10); xpos = xpos - dist; } if (ypos < final_y) { dist = Math.ceil((final_y - ypos) / 10); ypos = ypos + dist; } if (ypos > final_y) { dist = Math.ceil((ypos - final_y) / 10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+interval+")"; elem.movement = setTimeout(repeat, interval); }