国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 12:25:11
字體:
來源:轉載
供稿:網友

本文實例講述了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--將訂單數據寫入divfunction 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' onkeyup='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="清空" onclick="clearOrder();WriteOrderInDiv();" />  <input type="button" value="展開/收縮" onclick="show('Cart')" /> </div> <input type="button" value="加入商品1" onclick="SetOrderForm('NO1','商品1','1','3.5');WriteOrderInDiv();" /> <input type="button" value="加入商品2" onclick="SetOrderForm('NO2','商品2','1','5.5');WriteOrderInDiv();" /> <input type="button" value="加入商品3" onclick="SetOrderForm('NO3','商品3','1','10.5');WriteOrderInDiv();" /> </div>  <script>  window.WriteOrderInDiv();  </script>

上面的js作用是在頁面打開后即獲取并輸出訂單信息。

示例是用html寫的,在DataList中,只需要把 加入商品 按鈕的  onclick="SetOrderForm('NO3','商品3','1','10.5');中的參數綁定一下,設置外面的div懸浮在瀏覽器右側就可以了。

希望本文所述對大家的javascript程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 府谷县| 水富县| 屏东县| 新兴县| 鹿泉市| 正镶白旗| 霸州市| 洛扎县| 娄底市| 腾冲县| 梁河县| 鹤壁市| 大新县| 徐州市| 绥芬河市| 阿克苏市| 巴塘县| 阳城县| 沁水县| 拉萨市| 大足县| 正安县| 安达市| 克东县| 京山县| 巴彦淖尔市| 新巴尔虎左旗| 深泽县| 杭锦后旗| 吉林省| 富民县| 贵州省| 涞源县| 峨边| 武宣县| 汝阳县| 奉新县| 海阳市| 岳阳县| 三门峡市| 彭泽县|