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--将订单数据写入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

gwc.html文件如下：

 
 
 
      总计：0元
  
  
 
 
 
 
 
  

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

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

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