使用JS+DIV实现鼠标划过切换层效果的方法

本文实例讲述了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--将订单数据写入div function WriteOrderInDiv() { var gwc=""; 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"; gwc+=""; } //document.getElementById("gwc").innerHTML+=OneOrder[a]+"
";//每个产品的每个属性分割后字符输出 } gwc+=""; gwc+=""; //document.getElementById("gwc").innerHTML+=strs[i]+"
"; //每个产品分割后的字符输出 } gwc+="

商品名称	单价(￥)	数量	小计
"; gwc+=OneOrder[2]*OneOrder[3]; 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+"”\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

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

网站标题：使用JS+DIV实现鼠标划过切换层效果的方法
本文URL：https://www.cdcxhl.com/news39/321939.html

成都网站建设公司_创新互联，为您提供动态网站、品牌网站设计、网站设计公司、网站建设、企业建站、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联