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="<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' οnkeyup='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="清空" οnclick="clearOrder();WriteOrderInDiv();" />
   <input type="button" value="展开/收缩" οnclick="show('Cart')" />
          
  </div>
  <input type="button" value="加入商品1"  οnclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();" />
  <input type="button" value="加入商品2"  οnclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();" />
  <input type="button" value="加入商品3" οnclick="SetOrderForm('NO3','商品3','1','10.5');WriteOrderInDiv();" />
  </div>

    <script>
    window.WriteOrderInDiv();
    </script>

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

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

转载于:https://www.cnblogs.com/_zjl/archive/2011/07/04/2097659.html