js+cookies实现悬浮购物车的方法
本文实例讲述了js+cookies实现悬浮购物车的方法。分享给大家供大家参考。具体分析如下：
在“商品列表展示页”做上“悬浮的”与“DataList”结合的“无刷新购物车”，只需计算出总价，不必去单独页面结算。找了些资料修改了一下，整理示例如下：
gwc.js文件如下：
//JavaScriptDocument
//计算单个小计
functionEveryCount()
{
varindex=window.event.srcElement.parentElement.parentElement.rowIndex;
vara=document.getElementById("test").rows(index).cells(1).innerText;
varb=document.getElementById("Num"+index).value;
varc=parseFloat(a)*parseFloat(b);
document.getElementById("test").rows(index).cells(3).innerText=c;
TotalCount();
updateOrderCookie();//修改cookies中保存的数量
}
//计算总计
functionTotalCount()
{
varrowscount=document.getElementById("test").rows.length;
varsum=0;
for(vari=1;i<=(parseInt(rowscount)-1);i++)
{
varlittecount=document.getElementById("test").rows(i).cells(3).innerText;
sum=parseFloat(sum)+parseFloat(littecount);
}
document.getElementById("total").innerText=sum;
}
//<--Start--将订单数据写入div
functionWriteOrderInDiv()
{
vargwc="<tableid='test'style='border:0px;'><tr><tdwidth='40%'>商品名称</td><td>单价(￥)</td><td>数量</td><td>小计</td></tr>";
varOrderString=unescape(ReadOrderForm('24_OrderForm'));//获取cookies中的购物车信息
//document.write(OrderString);
varstrs=newArray();//定义一个数组，用于存储购物车里的每一条信息
varOneOrder="";
//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+="<tdid='dd'>";
gwc+="<inputtitle='填写想购买的数量,请使用合法数字字符'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--展开/收缩购物车
functionshow(id)
{
if(document.getElementById(id).style.display=="")
{
document.getElementById(id).style.display='none';
}
else{document.getElementById(id).style.display='';
}
}
//<--End--展开/收缩购物车
//<--Start--从cookie中读出订单数据的函数
functionReadOrderForm(name)
{
varcookieString=document.cookie;
if(cookieString=="")
{
returnfalse;
}
else
{
varfirstChar,lastChar;
firstChar=cookieString.indexOf(name);
if(firstChar!=-1)
{
firstChar+=name.length+1;
lastChar=cookieString.indexOf(';',firstChar);
if(lastChar==-1)lastChar=cookieString.length;
returncookieString.substring(firstChar,lastChar);
}
else
{
returnfalse;
}
}
}
//-->End
//<--Start--添加商品至购物车的函数,参数(商品编号,商品名称，商品数量，商品单价)
functionSetOrderForm(item_no,item_name,item_amount,item_price)
{
varcookieString=document.cookie;
if(cookieString.length>=4000)
{
alert("您的订单已满\n请结束此次订单操作后添加新订单！");
}
elseif(item_amount<1||item_amount.indexOf('.')!=-1)
{
alert("数量输入错误！");
}
else
{
varmer_list=ReadOrderForm('24_OrderForm');
varThen=newDate();
Then.setTime(Then.getTime()+30*60*1000);
varitem_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的函数
functionupdateOrderCookie()
{
varrowscount=document.getElementById("test").rows.length;
varitem_detail="";
for(vari=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);
}
varThen=newDate();
Then.setTime(Then.getTime()+30*60*1000);
document.cookie="24_OrderForm="+escape(item_detail)+";expires="+Then.toGMTString();
}
//<--End--订单更新
//<--清空购物车
functionclearOrder()
{
varThen=newDate();
document.cookie="24_OrderForm='';expires="+Then.toGMTString();
}
//<--End
gwc.html文件如下：
<scriptsrc="js/gwc.js"type="text/javascript"></script>
<divwidth="300px">
<divid="Cart"style="line-height:24px;font-size:12px;background-color:#f0f0f0;
border-top:1px#ffffffsolid；display:none;">
</div>
<divid="Info">
总计：<strong><spanid="total"style="color:#FF0000;font-size:36px">0</span></strong>元
<inputtype="button"value="清空"onclick="clearOrder();WriteOrderInDiv();"/>
<inputtype="button"value="展开/收缩"onclick="show('Cart')"/>
</div>
<inputtype="button"value="加入商品1"onclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();"/>
<inputtype="button"value="加入商品2"onclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();"/>
<inputtype="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');中的参数绑定一下，设置外面的div悬浮在浏览器右侧就可以了。
希望本文所述对大家的javascript程序设计有所帮助。