本文實例講述了js+cookies實現(xiàn)懸浮購物車的方法。分享給大家供大家參考。具體分析如下：

在 “商品列表展示頁”做上 “懸浮的”與“DataList”結(jié)合的 “無刷新購物車”，只需計算出總價，不必去單獨頁面結(jié)算。找了些資料修改了一下，整理示例如下：

gwc.js文件如下：

// JavaScript Document //計算單個小計 function EveryCount() { var index=window.event.srcElement.parentElement.parentElement.rowIndex; var a=document.getElementById("test").rows(index).cells(1).innerText; var b=document.getElementById("Num"+index).value; var c=parseFloat(a)*parseFloat(b); document.getElementById("test").rows(index).cells(3).innerText=c; TotalCount(); updateOrderCookie();//修改cookies中保存的數(shù)量 } //計算總計 function TotalCount() { var rowscount=document.getElementById("test").rows.length; var sum=0; for(var i=1;i<=(parseInt(rowscount)-1);i++) { var littecount=document.getElementById("test").rows(i).cells(3).innerText; sum=parseFloat(sum)+parseFloat(littecount); } document.getElementById("total").innerText=sum; } //<--Start--將訂單數(shù)據(jù)寫入div function WriteOrderInDiv() { var gwc=""; var OrderString=unescape(ReadOrderForm('24_OrderForm'));//獲取cookies中的購物車信息 //document.write(OrderString); var strs= new Array(); //定義一個數(shù)組，用于存儲購物車?yán)锏拿恳粭l信息 var OneOrder=""; //strs=OrderString.split("%7C");//用|分割出購物車中的每個產(chǎn)品 strs=OrderString.split("|");//用|分割出購物車中的每個產(chǎn)品 for (i=1;i"; gwc+=""; } //document.getElementById("gwc").innerHTML+=OneOrder[a]+"
";//每個產(chǎn)品的每個屬性分割后字符輸出 } gwc+=""; gwc+=""; //document.getElementById("gwc").innerHTML+=strs[i]+"
"; //每個產(chǎn)品分割后的字符輸出 } gwc+="

商品名稱	單價(￥)	數(shù)量	小計
"; gwc+=OneOrder[2]*OneOrder[3]; gwc+="

"; document.getElementById("Cart").innerHTML=gwc; TotalCount(); } //<--End--將訂單數(shù)據(jù)寫入div //--Start--展開/收縮購物車 function show(id) { if (document.getElementById(id).style.display=="") { document.getElementById(id).style.display='none'; } else{document.getElementById(id).style.display=''; } } //<--End--展開/收縮購物車 //<--Start--從cookie中讀出訂單數(shù)據(jù)的函數(shù) function ReadOrderForm(name) { var cookieString=document.cookie; if (cookieString=="") { return false; } else { var firstChar,lastChar; firstChar=cookieString.indexOf(name); if(firstChar!=-1) { firstChar+=name.length+1; lastChar = cookieString.indexOf(';', firstChar); if(lastChar == -1) lastChar=cookieString.length; return cookieString.substring(firstChar,lastChar); } else { return false; } } } //-->End //<--Start--添加商品至購物車的函數(shù),參數(shù)(商品編號,商品名稱，商品數(shù)量，商品單價) function SetOrderForm(item_no,item_name,item_amount,item_price) { var cookieString=document.cookie; if (cookieString.length>=4000) { alert("您的訂單已滿\n請結(jié)束此次訂單操作后添加新訂單！"); } else if(item_amount<1||item_amount.indexOf('.')!=-1) { alert("數(shù)量輸入錯誤！"); } else { var mer_list=ReadOrderForm('24_OrderForm'); var Then = new Date(); Then.setTime(Then.getTime()+30*60*1000); var item_detail="|"+item_no+"&"+item_name+"&"+item_price+"&"+item_amount; if(mer_list==false) { document.cookie="24_OrderForm="+escape(item_detail)+";expires=" + Then.toGMTString(); alert("“"+item_name+"”\n"+"已經(jīng)加入您的訂單！"); } else { if (mer_list.indexOf(escape(item_no))!=-1) { alert('此商品您已添加\n請進(jìn)入訂單修改數(shù)量！') } else { document.cookie="24_OrderForm="+mer_list+escape(item_detail)+";expires=" + Then.toGMTString(); alert("“"+item_name+"”\n"+"已經(jīng)加入您的訂單！"); } } } } //-->End //<--Start--修改數(shù)量后，更新cookie的函數(shù) function updateOrderCookie() { var rowscount=document.getElementById("test").rows.length; var item_detail=""; for(var i=1;i<=(parseInt(rowscount)-1);i++) { item_detail+="|"+document.getElementById("test").rows(i).cells(0).innerText+"&"+document.getElementById("test").rows(i).cells(0).innerText+"&"+document.getElementById("test").rows(i).cells(1).innerText+"&"+document.getElementById("Num"+i).value; // document.write(document.getElementById("test").rows(i).cells(1).innerText); } var Then = new Date(); Then.setTime(Then.getTime()+30*60*1000); document.cookie="24_OrderForm="+escape(item_detail)+";expires=" + Then.toGMTString(); } //<--End--訂單更新 //<--清空購物車 function clearOrder() { var Then = new Date(); document.cookie="24_OrderForm='';expires=" + Then.toGMTString(); } //<--End

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站標(biāo)題：使用JS+DIV實現(xiàn)鼠標(biāo)劃過切換層效果的方法
本文URL：http://aaarwkj.com/news39/321939.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計公司、網(wǎng)站建設(shè)、企業(yè)建站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)