js+cookies实现悬浮购物车的方法_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js+cookies实现悬浮购物车的方法_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4269字,纯文字阅读大概需要7分钟。
内容图文
![js+cookies实现悬浮购物车的方法_javascript技巧](/upload/InfoBanner/zyjiaocheng/326/67fd3be796da46a9bfc9b25e3c740c3d.jpg)
在 “商品列表展示页”做上 “悬浮的”与“DataList”结合的 “无刷新购物车”,只需计算出总价,不必去单独页面结算。找了些资料修改了一下,整理示例如下:
gwc.js文件如下:
"; //每个产品分割后的字符输出 } gwc+=""; 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+"” "+"已经加入您的订单!"); } 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文件如下:
上面的js作用是在页面打开后即获取并输出订单信息。
示例是用html写的,在DataList中,只需要把 加入商品 按钮的 onclick="SetOrderForm('NO3','商品3','1','10.5');中的参数绑定一下,设置外面的div悬浮在浏览器右侧就可以了。
希望本文所述对大家的javascript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的js+cookies实现悬浮购物车的方法_javascript技巧全部内容,希望文章能够帮你解决js+cookies实现悬浮购物车的方法_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。