js+cookies實(shí)現(xiàn)懸浮購物車的方法
本文實(shí)例講述了js+cookies實(shí)現(xiàn)懸浮購物車的方法。分享給大家供大家參考。具體分析如下:
在 “商品列表展示頁”做上 “懸浮的”與“DataList”結(jié)合的 “無刷新購物車”,只需計(jì)算出總價,不必去單獨(dú)頁面結(jié)算。找了些資料修改了一下,整理示例如下:
gwc.js文件如下:
// JavaScript Document
//計(jì)算單個小計(jì)
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中保存的數(shù)量
}
//計(jì)算總計(jì)
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--將訂單數(shù)據(jù)寫入div
function WriteOrderInDiv()
{
var gwc="<table id='test' style='border:0px;' ><tr><td width='40%'>商品名稱</td><td>單價(¥)</td><td>數(shù)量</td><td>小計(jì)</td></tr>";
var OrderString=unescape(ReadOrderForm('24_OrderForm'));//獲取cookies中的購物車信息
//document.write(OrderString);
var strs= new Array(); //定義一個數(shù)組,用于存儲購物車?yán)锏拿恳粭l信息
var OneOrder="";
//strs=OrderString.split("%7C");//用|分割出購物車中的每個產(chǎn)品
strs=OrderString.split("|");//用|分割出購物車中的每個產(chǎn)品
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='填寫想購買的數(shù)量,請使用合法數(shù)字字符' style='width:10px;' id='Num"+i+"' type='text' onkeyup='EveryCount();'value='"+OneOrder[a]+"'>";
gwc+="</td>";
}
//document.getElementById("gwc").innerHTML+=OneOrder[a]+"<br/>";//每個產(chǎn)品的每個屬性分割后字符輸出
}
gwc+="<td>";
gwc+=OneOrder[2]*OneOrder[3];
gwc+="</td>";
gwc+="</tr>";
//document.getElementById("gwc").innerHTML+=strs[i]+"<br/>"; //每個產(chǎn)品分割后的字符輸出
}
gwc+="</table>";
document.getElementById("Cart").innerHTML=gwc;
TotalCount();
}
//<--End--將訂單數(shù)據(jù)寫入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中讀出訂單數(shù)據(jù)的函數(shù)
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--添加商品至購物車的函數(shù),參數(shù)(商品編號,商品名稱,商品數(shù)量,商品單價)
function SetOrderForm(item_no,item_name,item_amount,item_price)
{
var cookieString=document.cookie;
if (cookieString.length>=4000)
{
alert("您的訂單已滿\n請結(jié)束此次訂單操作后添加新訂單!");
}
else if(item_amount<1||item_amount.indexOf('.')!=-1)
{
alert("數(shù)量輸入錯誤!");
}
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"+"已經(jīng)加入您的訂單!");
}
else
{
if (mer_list.indexOf(escape(item_no))!=-1)
{
alert('此商品您已添加\n請進(jìn)入訂單修改數(shù)量!')
}
else
{
document.cookie="24_OrderForm="+mer_list+escape(item_detail)+";expires=" + Then.toGMTString();
alert("“"+item_name+"”\n"+"已經(jīng)加入您的訂單!");
}
}
}
}
//-->End
//<--Start--修改數(shù)量后,更新cookie的函數(shù)
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">
總計(jì):<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>
上面的js作用是在頁面打開后即獲取并輸出訂單信息。
示例是用html寫的,在DataList中,只需要把 加入商品 按鈕的 onclick="SetOrderForm('NO3','商品3','1','10.5');中的參數(shù)綁定一下,設(shè)置外面的div懸浮在瀏覽器右側(cè)就可以了。
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- Javascript操縱Cookie實(shí)現(xiàn)購物車程序
- Javascript操縱Cookie實(shí)現(xiàn)購物車程序
- jQuery基于json與cookie實(shí)現(xiàn)購物車的方法
- jQuery使用cookie與json簡單實(shí)現(xiàn)購物車功能
- 原生JS 購物車及購物頁面的cookie使用方法
- 簡單的前端js+ajax 購物車框架(入門篇)
- JavaScript編寫一個簡易購物車功能
- 利用Angularjs和bootstrap實(shí)現(xiàn)購物車功能
- js實(shí)現(xiàn)商品拋物線加入購物車特效
- 原生js實(shí)現(xiàn)淘寶購物車功能
- 原生js+cookie實(shí)現(xiàn)購物車功能的方法分析
相關(guān)文章
使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對象參數(shù)
該函數(shù)兼容ie,firefox。并且可以使用clearSetTimeOut和clearInterval清除,比原setTimeout,setInterval方便很多,并且參數(shù)可以是object。2009-04-04
js構(gòu)造函數(shù)創(chuàng)建對象是否加new問題
本篇文章主要給大家詳細(xì)分析了js構(gòu)造函數(shù)創(chuàng)建對象加new與不加new的問題,有這方面興趣的參考學(xué)習(xí)下。2018-01-01
JS獲取dom 對象 ajax操作 讀寫cookie函數(shù)
一些常用的JS (JONEAjax) 獲取dom 對象,ajax操作,讀寫cookie類代碼,需要的朋友可以參考下。2009-11-11
ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06
jstl中判斷l(xiāng)ist中是否包含某個值的簡單方法
下面小編就為大家?guī)硪黄猨stl中判斷l(xiāng)ist中是否包含某個值的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript實(shí)現(xiàn)des解密加密全過程
這篇文章主要介紹了javascript 實(shí)現(xiàn)des解密加密的過程,需要的朋友可以參考下2014-04-04

