js+cookies實現懸浮購物車的方法

這篇文章主要介紹了js+cookies實現懸浮購物車的方法,涉及javascript數值計算與cookie的相關操作技巧,需要的朋友可以參考下

本文實例講述了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程序設計有所幫助。

您可能感興趣的文章:

  • Javascript操縱Cookie實現購物車程序
  • Javascript操縱Cookie實現購物車程序
  • jQuery基于json與cookie實現購物車的方法
  • jQuery使用cookie與json簡單實現購物車功能
  • 原生JS 購物車及購物頁面的cookie使用方法
  • 簡單的前端js+ajax 購物車框架(入門篇)
  • JavaScript編寫一個簡易購物車功能
  • 利用Angularjs和bootstrap實現購物車功能
  • js實現商品拋物線加入購物車特效
  • 原生js實現淘寶購物車功能
  • 原生js+cookie實現購物車功能的方法分析

本文鏈接:http://www.kinqrx.live/detail/331251.html

依據《信息網絡傳播權保護條例》第二十二條之規定,即“避風港原則”,本站所有文章及內容系第三方作者上傳,如有侵權行為請及時聯系本站刪除[email protected],本站不對內容傳播行為承擔賠償責任。

標簽:JavaScript
彩票中心