前端之家收集整理的这篇文章主要介绍了
js+cookies实现悬浮购物车的方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了js+cookies实现悬浮购物车的方法。分享给大家供大家参考。具体分析如下：
在 “商品列表展示页”做上 “悬浮的”与“DataList”结合的 “无刷新购物车”，只需计算出总价，不必去单独页面结算。找了些资料修改了一下，整理示例如下：
gwc.js文件如下：
修改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="
商品名称数量获取cookies中的购物车信息
//document.write(OrderString);
var strs= new Array(); //定义一个数组，用于存储购物车里的每一条信息
var OneOrder="";
//strs=OrderString.split("%7C");//用|分割出购物车中的每个产品
strs=OrderString.split("|");//用|分割出购物车中的每个产品
for (i=1;i";
gwc+="";//每个产品的每个属性分割后字符输出
}
gwc+=""; //每个产品分割后的字符输出
}
gwc+="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文件如下：
上面的js作用是在页面打开后即获取并输出订单信息。
示例是用html写的，在DataList中，只需要把 加入商品 按钮的 onclick="SetOrderForm('NO3','10.5');中的参数绑定一下，设置外面的div悬浮在浏览器右侧就可以了。
希望本文所述对大家的javascript程序设计有所帮助。
原文链接：https://www.f2er.com/js/54191.html
