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請結束此次訂單操作後添加新訂單！"); }