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

2024-05-06 16:20:49

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js+cookies實現懸浮購物車的方法,涉及javascript數值計算與cookie的相關操作技巧,需要的朋友可以參考下

本文實例講述了js+cookies實現懸浮購物車的方法。分享給大家供大家參考。具體分析如下：

在 “商品列表展示頁”做上 “懸浮的”與“DataList”結合的 “無刷新購物車”，只需計算出總價，不必去單獨頁面結算。找了些資料修改了一下，整理示例如下：

gwc.js文件如下：

// 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.getElementById("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文件如下：

<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>