js+cookies实现悬浮购物车的方法

本文实例讲述了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--将订单数据写入divfunction 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（"您的订单已满
请结束此次订单操作后添加新订单！"）;}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+"”
"+"已经加入您的订单！"）;}else{if （mer_list.indexOf（escape（item_no））！=-1）{alert（"此商品您已添加
请进入订单修改数量！"）}else{document.cookie="24_OrderForm="+mer_list+escape（item_detail）+";expires=" + Then.toGMTString（）;alert（"“"+item_name+"”
"+"已经加入您的订单！"）;}}}}//-->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>

上面的js作用是在页面打开后即获取并输出订单信息。
示例是用html写的，在DataList中，只需要把加入商品按钮的 onclick="SetOrderForm（"NO3","商品3","1","10.5"）;中的参数绑定一下，设置外面的div悬浮在浏览器右侧就可以了。
希望本文所述对大家的javascript程序设计有所帮助。