js+cookies實現懸浮購物車的方法

js+cookies實現懸浮購物車的方法

 　　本文執行個體講述了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(); } //<--End

　　gwc.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程式設計有所協助。