網上下了一個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="清空" οnclick="clearOrder();WriteOrderInDiv();" />
<input type="button" value="展開/收縮" οnclick="show('Cart')" />
</div>
<input type="button" value="加入商品1" οnclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();" />
<input type="button" value="加入商品2" οnclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();" />
<input type="button" value="加入商品3" οnclick="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' οnkeyup='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();
}頁面演示圖片