本文實例講述了js+cookies實現懸浮購物車的方法。分享給大家供大家參考。具體分析如下：
在 “商品列表展示頁”做上 “懸浮的”與“DataList”結合的 “無刷新購物車”，只需計算出總價，不必去單獨頁面結算。找了些資料修改了一下，整理示例如下：
gwc.js文件如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 // 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中保存的數量 } //計算總計 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--將訂單數據寫入div function WriteOrderInDiv() { var gwc="<table id='test' style='border:0px;' ><tr><td width='40%'>商品名稱</td><td>單價(￥)</td><td>數量</td><td>小計</td></tr>"; var OrderString=unescape(ReadOrderForm('24_OrderForm'));//獲取cookies中的購物車信息 //document.write(OrderString); var strs= new Array(); //定義一個數組，用於存儲購物車裡的每一條信息 var OneOrder=""; //strs=OrderString.split("%7C");//用|分割出購物車中的每個產品 strs=OrderString.split("|");//用|分割出購物車中的每個產品 for (i=1;i<strs.length ;i++ ) { gwc+="<tr>"; //OneOrder=strs[i].split("%26"); OneOrder=strs[i].split("&"); for (a=1;a<OneOrder.length ;a++ ) { if(a!=3) { gwc+="<td>"; gwc+=OneOrder[a]; gwc+="</td>"; } else { gwc+="<td id='dd'>"; gwc+="<input title='填寫想購買的數量,請使用合法數字字符' style='width:10px;' id='Num"+i+"' type='text' onkeyup='EveryCount();'value='"+OneOrder[a]+"'>"; gwc+="</td>"; } //document.getElementById("gwc").innerHTML+=OneOrder[a]+"<br/>";//每個產品的每個屬性分割後字符輸出 } gwc+="<td>"; gwc+=OneOrder[2]*OneOrder[3]; gwc+="</td>"; gwc+="</tr>"; //document.getElementById("gwc").innerHTML+=strs[i]+"<br/>"; //每個產品分割後的字符輸出 } gwc+="</table>"; document.getElementById("Cart").innerHTML=gwc; TotalCount(); } //<--End--將訂單數據寫入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中讀出訂單數據的函數 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--添加商品至購物車的函數,參數(商品編號,商品名稱，商品數量，商品單價) function SetOrderForm(item_no,item_name,item_amount,item_price) { var cookieString=document.cookie; if (cookieString.length>=4000) { alert("您的訂單已滿n請結束此次訂單操作後添加新訂單！"); } else if(item_amount<1||item_amount.indexOf('.')!=-1) { alert("數量輸入錯誤！"); } 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"+"已經加入您的訂單！"); } else { if (mer_list.indexOf(escape(item_no))!=-1) { alert('此商品您已添加n請進入訂單修改數量！') } else { document.cookie="24_OrderForm="+mer_list+escape(item_detail)+";expires=" + Then.toGMTString(); alert("“"+item_name+"”n"+"已經加入您的訂單！"); } } } } //-->End //<--Start--修改數量後，更新cookie的函數 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.getEleme ntById("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(); } //<--Endgwc.html文件如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script src="js/gwc.js" type="text/javascript"></script> <div width="300px"> <div id="Cart" style="line-height: 24px; font-size: 12px; background-color: #f0f0f0; border-top: 1px #ffffff solid；display:none; "> </div> <div id="Info"> 總計：<strong><span id="total" style="color: #FF0000; font-size: 36px">0</span></strong>元 <input type="button" value="清空" onclick="clearOrder();WriteOrderInDiv();" /> <input type="button" value="展開/收縮" onclick="show('Cart')" /> </div> <input type="button" value="加入商品1" onclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();" /> <input type="button" value="加入商品2" onclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();" /> <input type="button" value="加入商品3" onclick="SetOrderForm('NO3','商品3','1','10.5');WriteOrderInDiv();" /> </div> <script> window.WriteOrderInDiv(); </script>上面的js作用是在頁面打開後即獲取並輸出訂單信息。
示例是用html寫的，在DataList中，只需要把 加入商品 按鈕的 onclick="SetOrderForm('NO3','商品3','1','10.5');中的參數綁定一下，設置外面的div懸浮在浏覽器右側就可以了。
希望本文所述對大家的javascript程序設計有所幫助。