包含瞭五個頁面,N多函數,完成工作有幻燈片,點擊顯示內容功能,圖片庫,表格優化,表單優化,我自己沒有寫最後表單的ajax
在博客上隻放瞭 js 函數代碼,是供自己溫習,想要學習建議閱讀書籍。
案例放在github,地址:https://github.com/UnaMaatin/javascript-dom
// Global function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } //與insertBefor方法對應 function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } //追加 class名稱 function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } } //為導航鏈接動態添加 class=“here” function highlightPage() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; //獲取並遍歷 var headers = document.getElementsByTagName('header'); if (headers.length == 0) return false; var navs = headers[0].getElementsByTagName('nav'); if (navs.length == 0) return false; var links = navs[0].getElementsByTagName("a"); for (var i=0; i final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var 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); } function prepareSlideshow() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("intro")) return false; //創建幻燈片元素準備相應鏈接 var intro = document.getElementById("intro"); var slideshow = document.createElement("p"); slideshow.setAttribute("id","slideshow"); var frame = document.createElement("img"); //在此案例這個圖片是一個類似相框的背景圖,添加到創建的p上 frame.setAttribute("src","images/frame.gif"); frame.setAttribute("alt",""); frame.setAttribute("id","frame"); slideshow.appendChild(frame); //聲明:要做出幻燈片效果需要的圖片是幾張拼接在一起的 var preview = document.createElement("img"); preview.setAttribute("src","images/slideshow.gif"); preview.setAttribute("alt","a glimpse of what awaits you"); preview.setAttribute("id","preview"); slideshow.appendChild(preview); //在指定子節點後面添加子節點 insertAfter(slideshow,intro); //遍歷,使其移動到相應的位置上,調用movement函數傳入5毫秒的interval值 var links = document.getElementsByTagName("a"); for (var i=0; i