在 “商品列表展示页”做上 “悬浮的”与“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="<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("您的订单已满\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文件如下：
<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程序设计有所帮助。
更多js+cookies实现悬浮购物车的方法。