一、項目運行：HBuilder X

二、項目技術：1、廣告隨鼠標滾動二發生位置變化
? ? ? ? ? ? ? ? ? ? ? ? ?2、漂浮廣告
? ? ? ? ? ? ? ? ? ? ? ? ?3、循環垂直向上滾動的特效

三、項目難點：購物車的系列操作

注：購買功能可以實現的前提是行列節點的獲取正確，熟練運用單引號、雙引號的套用！！！

四、界面展示：

首頁界面：

圖書界面：

登錄界面：

注冊界面：?

五、代碼展示：（函數部分）

主界面函數：

<script type="text/javascript">//自動彈出廣告（在頁面第一次加載完畢時）；//window.open("open.html");//循環顯示圖片地址//imgs——圖片路徑的數組var imgs = new Array();imgs[0] = "images/dd_scroll_1.jpg";imgs[1] = "images/dd_scroll_2.jpg";imgs[2] = "images/dd_scroll_3.jpg";imgs[3] = "images/dd_scroll_4.jpg";imgs[4] = "images/dd_scroll_5.jpg";imgs[5] = "images/dd_scroll_6.jpg";//nums——按鈕標號的數組var nums = new Array();nums[0] = "scroll_number_1";nums[1] = "scroll_number_2";nums[2] = "scroll_number_3";nums[3] = "scroll_number_4";nums[4] = "scroll_number_5";nums[5] = "scroll_number_6";var Nowimg = 1;var Maximg = 6;function loopShow(id) {if (Number(id)) {Nowimg = id;}for (var i = 1; i < Maximg + 1; i++) {if (i == Nowimg) {document.getElementById("dd_scroll").src = imgs[i - 1]; //顯示你當前選中的按鈕所對應的圖片document.getElementById(nums[i - 1]).className = "scroll_number_over"; //設置當前按鈕的CSS樣式} else {document.getElementById(nums[i - 1]).className = "scroll_number_out"; //如果未選中該按鈕則無光亮效果；}}if (Nowimg == Maximg) { //判斷是否為最后一個按鈕Nowimg = 1; //是的話就轉為第一個按鈕} else {Nowimg++; //隨時遞增}// var theTimer=setTimeout('loopShow()', 3000); //設置定時器，顯示下一張圖片}//最新上架的改變效果//var bookCate = new Array();bookCate[0] = "book_history";bookCate[1] = "book_family";bookCate[2] = "book_culture";bookCate[3] = "book_novel";var bookClass = new Array();bookClass[0] = "history";bookClass[1] = "bj";bookClass[2] = "culture";bookClass[3] = "novel";//發生改變的函數function update(id) {for (var i = 0; i < bookCate.length; i++) {if (id == i) {document.getElementById(bookCate[i]).className = 'book_show';document.getElementById(bookClass[i]).className = 'book_type_out';} else {document.getElementById(bookCate[i]).className = "book_none";document.getElementById(bookClass[i]).className = "book_type";}}}//廣告隨著鼠標的移動而發生變化的功能var t;var l;var t1;var l1;var rightWidth = 100;var rightWidth1 = 20;//可見寬 Heightwindow.onload = function() {//獲取距離上面的距離初始值//根據id找到廣告圖片var myi = document.getElementById("dd_close");var mys = document.getElementById('right1');//區分瀏覽器//拿到top值if (myi.currentStyle != undefined) { //IEt = myi.currentStyle.top;l = myi.currentStyle.left;t1 = mys.currentStyle.top;l1 = mys.currentStyle.left;} else { //非IEt = document.defaultView.getComputedStyle(myi).top;l = document.defaultView.getComputedStyle(myi).right;t1 = document.defaultView.getComputedStyle(mys).top;l1 = document.defaultView.getComputedStyle(mys).right;}//100px-->100t = parseInt(t);l = parseInt(l);t1 = parseInt(t1);l1 = parseInt(l1);}//檢測鼠標滾動的事件window.onscroll = function() {//拿到圖片var myi = document.getElementById("dd_close");var mys = document.getElementById('right1');//獲取滾動條距離上面/左邊的距離var gt = document.documentElement.scrollTop;var gl = document.documentElement.scrollLeft;//計算距離var a = gt + t + "px";var b = gl + parseInt(document.documentElement.clientWidth) - l - rightWidth1 + "px";var a1 = gt + t1 + "px";var b1 = gl + parseInt(document.documentElement.clientWidth) - l1 - rightWidth + "px";//重新賦top值/left值確保跟著滾動條走myi.style.top = a;myi.style.left = b;mys.style.top = a1;mys.style.left = b1;}function myc() {var myi = document.getElementById("dd_close");var mys = document.getElementById('right1');myi.style.display = 'none';mys.style.display = 'none';}var theTimer = setInterval('loopShow()', 3000); //設置定時器，顯示下一張圖片//書訊快遞循環垂直向上滾動的文字特效var dome = document.getElementById("dome");var d1 = document.getElementById("dome1");var dome2 = document.getElementById("dome2");var speed = 50; //設置向上滾動速度dome2.innerHTML = d1.innerHTML; //復制dome1為dome2function moveTop() {if (dome2.offsetTop - dome.scrollTop <= 0) //當滾動至dome1與dome2交界時dome.scrollTop -= d1.offsetHeight //dome跳到最頂端else {dome.scrollTop++}}var MyMar = setInterval(moveTop, speed) //設置定時器dome.onmouseover = function() {clearInterval(MyMar)} //鼠標移上時清除定時器達到滾動停止的目的dome.onmouseout = function() {MyMar = setInterval(moveTop, speed)} //鼠標移開時重設定時器，繼續滾動//漂浮廣告//定義全局變量var moveX = 0; //X軸方向移動的距離var moveY = 0; //Y軸方向移動的距離var step = 1; //圖片移動的速度var directionY = 0; //設置圖片在Y軸的移動方向var directionX = 0; //設置圖片在X軸的移動方向function changePos() {var img = document.getElementById("pf"); //圖片所在層IDvar width = document.documentElement.clientWidth; //瀏覽器寬度var height = document.documentElement.clientHeight; //瀏覽器高度var imgHeight = document.getElementById("pftp").height; //漂浮圖片高度var imgWidth = document.getElementById("pftp").width; //漂浮圖片寬度img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px"; //漂浮圖片距瀏覽器左側位置img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px"; //漂浮圖片距瀏覽器頂端位置if (directionY == 0) {moveY = moveY + step; //漂浮圖片在Y軸方向上向下移動} else {moveY = moveY - step; //漂浮圖片在Y軸方向上向上移動}if (moveY < 0) { //如果漂浮圖片漂到瀏覽器頂端時，設置圖片在Y軸方向上向下移動directionY = 0;moveY = 0;}if (moveY >= (height - imgHeight)) { //如果漂浮圖片漂到瀏覽器底端時，設置圖片在Y軸方向上向上移動directionY = 1;moveY = (height - imgHeight);}if (directionX == 0) {moveX = moveX + step; //漂浮圖片在X軸方向上向右移動} else {moveX = moveX - step; //漂浮圖片在X軸方向上向左移動}if (moveX < 0) { //如果漂浮圖片漂到瀏覽器左側時，設置圖片在X軸方向上向右移動directionX = 0;moveX = 0;}if (moveX >= (width - imgWidth)) { //如果漂浮圖片漂到瀏覽器右側時，設置圖片在X軸方向上向左移動directionX = 1;moveX = (width - imgWidth);}}setInterval("changePos()", 30);</script>

?購物車部分：

<script type="text/javascript">//顯示和隱藏推薦圖書function gb(){var img=document.getElementById("shopping_commend_arrow");var tj =document.getElementById("shopping_commend_sort");if(tj.style.display=='none'){//判斷是否為隱藏或者顯示img.src="images/shopping_arrow_up.gif";//改變圖標圖片tj.style.display='block';//如果為隱藏則改變為顯示}else{img.src="images/shopping_arrow_down.gif";//改變圖標圖片tj.style.display='none';//如果為顯示則改變為顯隱藏}}//購物車鼠標光亮效果window.onload=function(){var sp=document.getElementsByName("shopping_product_list");//一次性拿到所有的商品行for(var i=0;i<sp.length;i++){sp[i].onmouseover=function(){this.style.backgroundColor="orange";}sp[i].onmouseout=function(){this.style.backgroundColor="white";}}ws();mym();} //全選效果function qx(){//拿到全選框var qx=document.getElementById("qx");//拿到其余復選框對象var qy=document.getElementsByName("qy");//遍歷讓其余復選框的選中狀態和全選框保持一致for(var i=0;i<qy.length;i++){qy[i].checked=qx.checked;}}//完善全選功能function ws(){//拿到全選框var qx=document.getElementById("qx");//拿到其余復選框對象var qy=document.getElementsByName("qy");for (var i = 0; i < qy.length; i++) {qy[i].onclick = function() {var f = true;//遍歷其余復選框的狀態發現了未選中則全選的狀態為未選中for (var i = 0; i < qy.length; i++) {if (qy[i].checked == false) {f = false;break;}}qx.checked = f;}}}//刪除單個功能function del(rid){//拿到行對象var row=document.getElementById(rid);//拿到改行的下標var index=row.rowIndex;//拿到表格對象var tab=document.getElementById("tableshopping");//刪除改行tab.deleteRow(index);mym();}//選中刪除function delall(){//拿到其余復選框對象var qy=document.getElementsByName("qy");//遍歷判斷是否選中for (var i = 0; i < qy.length; i++) {if(qy[i].checked==true){//獲得改行的下標var index=qy[i].value;//調用刪除單個的方法del(index);//下標改變i--;}}}//改變商品的總價格function mym(){//拿到表格對象var tab=document.getElementById("tableshopping");//拿到表格所有行var row=tab.rows;//定義總價格var sum =0;//定義總積分var sjf=0;//定義總節省var sjs=0;//遍歷所有行for(var i=0;i<row.length;i++){//拿到該行的所欲列var cells=row[i].cells;//拿到該行的價格var hf=cells[3].lastChild.innerHTML;hf=parseFloat(hf).toFixed(0);//拿到該行的數量var num=cells[4].childNodes[1].value;//相乘var yuan=hf*num;sum+=yuan;//拿到該行的積分var jf=cells[1].innerHTML;jf=parseFloat(jf);jf=num*jf;sjf+=jf;sjf=sjf;//拿到該行的節省var js=cells[2].lastChild.innerHTML;js=parseFloat(js);js=num*js;sjs+=js;}sjs=sjs-sum;sjs=sjs.toFixed(0);//拿到總價格的位置并賦值document.getElementById("qian").innerHTML="￥"+sum;//拿到總積分的位置并賦值document.getElementById("jf").innerHTML=sjf;//拿到總節省的位置并且賦值document.getElementById("zjs").innerHTML=sjs;}//改變數量function changeNum(rid,type){//根據下標拿到改行var row = document.getElementById(rid);//拿到所有的列var cs=row.cells;//拿到第五列第2個孩子var num = cs[4].childNodes[1].value;//判斷是否為加減if(type=='add'){num++;}else{if(num>1){num--;}else{alert("數量應該最小為1");}}cs[4].childNodes[1].value=num;mym(); }//購買的方法var ids=7;function add(rid){var add="add";var minus="minus";//獲得改行的代碼var row =document.getElementById(rid);//獲得書本名var sname=row.childNodes[1].childNodes[1].innerHTML;//獲得市場價var scj=row.childNodes[3].childNodes[1].innerHTML;//獲得當前價格var jg=row.childNodes[5].childNodes[1].innerHTML;//開始賦值//拿到表格對象var tab=document.getElementById("tableshopping");//拿到表格所有行var row=tab.rows;//獲得插入位置var wz=row.length//在該位置插入一行var nrow=tab.insertRow(wz);nrow.setAttribute("onmouseover","this.style.backgroundColor='orange'");nrow.setAttribute("onmouseout","this.style.backgroundColor='white'");nrow.name='shopping_product_list';nrow.id='shoppingProduct_0'+ids+'';nrow.className='shopping_product_list';//插入第一列var c0=nrow.insertCell(0);//設置第一列的值c0.className='shopping_product_list_1';c0.innerHTML='<input type="checkbox" name="qy" value="shoppingProduct_0'+ids+'"/><a href="#"class="blue">'+sname+'</a></td>'//插入第二列var c1=nrow.insertCell(1);//設置第二列的值c1.className='shopping_product_list_2';c1.innerHTML='<td>31</td>';//插入第三列var c2=nrow.insertCell(2);//設置第三列的值c2.className='shopping_product_list_3';c2.innerHTML='&yen<a>'+scj+'</a>';//插入第四列var c3=nrow.insertCell(3);//設置第四列的值c3.className='shopping_product_list_4';//獲得折扣var zk=jg/scj*100+"";zk=parseInt(zk);c3.innerHTML='&yen<a>'+jg+'('+zk+'折)</a>';//插入第五列var c4=nrow.insertCell(4);//設置第五列的值c4.className='shopping_product_list_5';c4.innerHTML="<img src='images/taobao_minus.jpg' onclick=\"changeNum('"+'shoppingProduct_0'+ids+"','minus')\" class='hand'><input type='text' value='1'><img src='images/taobao_adding.jpg' onclick=\"changeNum('"+'shoppingProduct_0'+ids+"','add')\" class='hand'>";//插入第六列var c5=nrow.insertCell(5);//設置第六列的值c5.className='shopping_product_list_6';c5.innerHTML='<a href=javascript:del("shoppingProduct_0'+ids+'"); class="blue">刪除</a>';ids++;mym();ws();} </script>

?注冊界面：

<script type="text/javascript">//所有的地區var cityList = new Array();cityList['北京市'] = ['朝陽區', '東城區', '西城區', '海淀區', '宣武區', '豐臺區', '懷柔', '延慶', '房山'];cityList['上海市'] = ['寶山區', '長寧區', '豐賢區', '虹口區', '黃浦區', '青浦區', '南匯區', '徐匯區', '盧灣區'];cityList['廣州省'] = ['廣州市', '惠州市', '汕頭市', '珠海市', '佛山市', '中山市', '東莞市'];cityList['深圳市'] = ['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'];cityList['重慶市'] = ['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'];cityList['天津市'] = ['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'];cityList['江蘇省'] = ['南京市', '蘇州市', '無錫市'];cityList['浙江省'] = ['杭州市', '寧波市', '溫州市'];cityList['四川省'] = ['四川省', '成都市'];cityList['海南省'] = ['海口市'];cityList['福建省'] = ['福州市', '廈門市', '泉州市', '漳州市'];cityList['山東省'] = ['濟南市', '青島市', '煙臺市'];cityList['江西省'] = ['江西省', '南昌市'];cityList['廣西省'] = ['柳州市', '南寧市'];cityList['安徽省'] = ['安徽省', '合肥市'];cityList['河北省'] = ['邯鄲市', '石家莊市'];cityList['河南省'] = ['鄭州市', '洛陽市'];cityList['湖北省'] = ['武漢市', '宜昌市'];cityList['湖南省'] = ['湖南省', '長沙市'];cityList['陜西省'] = ['陜西省', '西安市'];cityList['山西省'] = ['山西省', '太原市'];cityList['黑龍江省'] = ['黑龍江省', '哈爾濱市'];cityList['其他'] = ['其他'];//獲得所有的省份window.onload = function() {var sf = document.getElementById("sf");for (var i in cityList) {sf.add(new Option(i, i));}}//獲得所有的城市function getcs() {//獲得省份var sf = document.getElementById("sf").value;var cs = document.getElementById("cs");cs.length = 0;//遍歷數組for (var i in cityList) {if (sf == i) {for (var j in cityList[i]) {cs.add(new Option(cityList[i][j], cityList[i][j]));}}}}//鼠標移上提交注冊時光標改變function ys() {document.getElementById("registerBtn").src = "images/register_btn_over.gif";}//鼠標移除提交注冊時光標改變function yc() {document.getElementById("registerBtn").src = "images/register_btn_out.gif";}//當鼠標在email框中時function inEmail() {//email框var email = document.getElementById("email");//傍邊的提示框var pb = document.getElementById("email_prompt");email.className = "register_input register_input_Focus";pb.innerHTML = "此郵箱將是您登錄當當網的賬號，并將用來接收驗證郵件";pb.className = "register_prompt";}//當鼠標在email框外時function outEmail() {//email框var email = document.getElementById("email");//傍邊的提示框var pb = document.getElementById("email_prompt");//清空傍邊的提示框pb.innerHTML = "";//定義正則var reg = /^\w+@+\w+(\.[a-zA-Z]{2,3}){1,2}$/;//判斷是否為空if (email.value == "") {pb.innerHTML = "電子郵件是必填項，請輸入您的Email地址";pb.className = "register_prompt_error";email.className = "register_input register_input_Blur";return false;}if (reg.test(email.value) == false) {pb.innerHTML = "電子郵件格式不正確，請重新輸入";pb.className = "register_prompt_error";email.className = "register_input register_input_Blur";return false;}pb.className = "register_prompt_ok";email.className = "register_input";return true;}//當鼠標在設置昵稱框中時function onName() {var nickName = document.getElementById("nickName");var nickNameId = document.getElementById("nickName_prompt");nickName.className = "register_input register_input_Focus";nickNameId.innerHTML = "昵稱可由大小寫英文字母、數字組成，長度為4-20個字符";nickNameId.className = "register_prompt";}//當鼠標離開設置昵稱框時function outName() {var nickName = document.getElementById("nickName");var nickNameId = document.getElementById("nickName_prompt");nickNameId.innerHTML = "";var reg = /^[a-zA-Z0-9]{4,20}$/;if (nickName.value == "") {nickNameId.innerHTML = "昵稱為必填項，請輸入您的昵稱";nickNameId.className = "register_prompt_error";nickName.className = "register_input register_input_Blur";return false;}if (reg.test(nickName.value) == false) {nickNameId.innerHTML = "昵稱格式錯誤，請用大小寫英文字母、數字，長度4-20個字符";nickNameId.className = "register_prompt_error";nickName.className = "register_input register_input_Blur";return false;}nickNameId.className = "register_prompt_ok";nickName.className = "register_input";return true;}//鼠標在密碼文本框中時function onPwd() {var pwd = document.getElementById("pwd");var pwdId = document.getElementById("pwd_prompt");pwd.className = "register_input register_input_Focus";pwdId.innerHTML = "密碼可由大小寫英文字母、數字組成，長度6－20個字符";pwdId.className = "register_prompt";}//鼠標離開密碼文本框中時 function outPwd() {var pwd = document.getElementById("pwd");var pwdId = document.getElementById("pwd_prompt");pwdId.innerHTML = "";var reg = /^[a-zA-Z0-9]{6,20}$/;if (pwd.value == "") {pwdId.innerHTML = "密碼為必填項，請設置您的密碼";pwdId.className = "register_prompt_error";pwd.className = "register_input register_input_Blur";return false;}if (reg.test(pwd.value) == false) {pwdId.innerHTML = "密碼格式錯誤，請用大小寫英文字母、數字，長度6-20個字符";pwdId.className = "register_prompt_error";pwd.className = "register_input register_input_Blur";return false;}pwdId.className = "register_prompt_ok";pwd.className = "register_input";return true;}//鼠標在再輸入一次密碼文本框中時function onPwd2() {var repwd = document.getElementById("repwd");repwd.className = "register_input register_input_Focus";}//鼠標離開再輸入一次密碼文本框中時function outPwd2() {var pwd = document.getElementById("pwd");var repwd = document.getElementById("repwd");var repwdId = document.getElementById("repwd_prompt");repwdId.innerHTML = "";if (repwd.value == "") {repwdId.innerHTML = "請再次輸入您的密碼";repwdId.className = "register_prompt_error";repwd.className = "register_input register_input_Blur";return false;}if (pwd.value != repwd.value) {repwdId.innerHTML = "兩次輸入密碼不一致，請重新輸入";repwdId.className = "register_prompt_error";repwd.className = "register_input register_input_Blur";return false;}repwdId.className = "register_prompt_ok";repwd.className = "register_input";return true;}function tj() {outEmail();outName();outPwd();outPwd2();var flagEmail = outEmail();var flagNickName = outName();var flagPwd = outPwd();var flagRepwd = outPwd2();if (flagEmail == true && flagNickName == true && flagPwd == true && flagRepwd == true) {alert("注冊成功！您是當當圖書網的1位用戶，祝您生活愉快");return true;} else {return false;}}</script>

總結

以上是生活随笔為你收集整理的前端项目——当当图书网（javaScript）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。