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

本文实例讲述了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
商品名称
单价(￥)
数量
小计
";
 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";
 //OneOrder=strs[i].split("%26");
 OneOrder=strs[i].split("&");
 for (a=1;a";
  gwc+=OneOrder[a];
  gwc+="";
  }
  else
  {
  gwc+="";
  gwc+="";
  gwc+="";
  }
  //document.getElementById("gwc").innerHTML+=OneOrder[a]+"
";//每个产品的每个属性分割后字符输出
 }
 gwc+="";
  gwc+=OneOrder[2]*OneOrder[3];
  gwc+="";
  gwc+="";
    //document.getElementById("gwc").innerHTML+=strs[i]+"
";  //每个产品分割后的字符输出
  }
 gwc+="";
 document.getElementById("Cart").innerHTML=gwc;
 TotalCount();
}
//End
//=4000)
  {
    alert("您的订单已满\n请结束此次订单操作后添加新订单！");
  }
  else if(item_amountEnd
//

gwc.html文件如下：

 
 

      总计：0元
  

 

  

上面的js作用是在页面打开后即获取并输出订单信息。

示例是用html写的，在DataList中，只需要把 加入商品 按钮的 onclick="SetOrderForm('NO3','商品3','1','10.5');中的参数绑定一下，设置外面的div悬浮在浏览器右侧就可以了。

希望本文所述对大家的javascript程序设计有所帮助。