本文實例講述了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="
";
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
本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯成都公司!
網站標題:使用JS+DIV實現鼠標劃過切換層效果的方法
本文URL:http://muchs.cn/news39/321939.html
成都網站建設公司_創(chuàng)新互聯,為您提供動態(tài)網站、品牌網站設計、網站設計公司、網站建設、企業(yè)建站、域名注冊
廣告
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創(chuàng)新互聯