xihuannioyj的專欄http://write.blog.csdn.net/configure
阿新 • • 發佈:2019-02-10
網上下了一個js+cookie的購物車 感覺功能不夠強大 自己又稍微改動了一下 基本上能滿足購物車的要求
顯示html程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/ShoppingCart.js" type="text/javascript"></script> <title>購物車</title> </head> <body> <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 language="javascript" type="text/javascript"> window.WriteOrderInDiv(); </script> </body> </html>
指令碼
// JavaScript Document //計算單個小計 function EveryCount(index) { var a = $("#test tr").eq(index).find("td").eq(2).text(); var b = $("#Num" + index).val(); var c = parseFloat(a) * parseFloat(b); $("#test tr").eq(index).find("td").eq(4).text(c); TotalCount(); updateOrderCookie(); //修改cookies中儲存的數量 WriteOrderInDiv(); } //計算總計 function TotalCount() { var rowscount = $("#test tr").length; var sum = 0; for (var i = 1; i <= parseInt(rowscount); i++) { var littecount = $("#test tr").eq(i).find("td").eq(4).text(); if (littecount != null && littecount != "NaN" && littecount != "") { sum = parseFloat(sum) + parseFloat(littecount); } } $("#total").text(sum); } //判斷是否存在相同的商品 如果相同則加一 function IsRepeat(codes) { var rowscount = $("#test tr").length; var sum = 0; for (var i = 1; i <= (parseInt(rowscount) - 1); i++) { var Code = $("#test tr").eq(i).find("td").eq(0).text(); if (codes == Code) { return i; } } return 0; } //<--Start--將訂單資料寫入div function WriteOrderInDiv() { var gwc = "<table id='test' style='border:0px;' ><tr><td>編號</td><td width='40%'>商品名稱</td><td>單價(¥)</td><td>數量</td><td>小計</td><td>操作</td></tr>"; var OrderString = unescape(ReadOrderForm('24_OrderForm')); //獲取cookies中的購物車資訊 var strs = new Array(); //定義一個數組,用於儲存購物車裡的每一條資訊 var OneOrder = ""; strs = OrderString.split("|"); //用|分割出購物車中的每個產品 for (i = 1; i < strs.length; i++) { gwc += "<tr>"; OneOrder = strs[i].split("&"); for (a = 0; a < OneOrder.length; a++) { if (a != 3) { gwc += "<td>"; gwc += OneOrder[a]; gwc += "</td>"; } else { gwc += "<td id='dd'>"; gwc += "<input title='填寫想購買的數量,請使用合法數字字元' style='width:40px;' id='Num" + i + "' type='text' onkeyup='javascript:EveryCount(" + i + ");' value='" + OneOrder[a] + "'>"; gwc += "</td>"; } } gwc += "<td>"; gwc += OneOrder[2] * OneOrder[3]; gwc += "</td>"; gwc += "<td>"; gwc += " <a href='javascript:void();' onclick ='DelteData(this);'>刪除</a>"; gwc += "</td>"; gwc += "</tr>"; } gwc += "</table>"; $("#Cart").html(gwc); TotalCount(); } function DelteData(obj) { var $this = $(obj); $this.closest("tr").remove(); TotalCount(); updateOrderCookie(); //修改cookies中儲存的數量 } //<--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; var i = IsRepeat(item_no); if (i > 0 && mer_list.indexOf(escape(item_no)) != -1) { var count = $("#Num" + i).val(); $("#Num" + i).val(parseInt(count) + 1); EveryCount(i); // alert("“" + item_name + "”\n" + "已經加入您的訂單!"); } else if (i == 0 && mer_list == false) { document.cookie = "24_OrderForm=" + escape(item_detail) + ";expires=" + Then.toGMTString(); // alert("“" + item_name + "”\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 = $("#test tr").length; var item_detail = ""; for (var i = 1; i <= parseInt(rowscount); i++) { var d = $("#test tr").eq(i).find("td").eq(0).text(); var e = $("#test tr").eq(i).find("td").eq(1).text(); var f = $("#test tr").eq(i).find("td").eq(2).text(); var g = $("#test tr").eq(i).find("td").find("input[type='text']").val(); if (d != null && d != "NaN" && d != "" && e != null && e != "NaN" && e != "" && f != null && f != "NaN" && f != "" && g != null && g != "NaN" && g != "") { item_detail += "|" + d + "&" + e + "&" + f + "&" + g; } } 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(); }
頁面演示圖片