So implementieren Sie einen schwebenden Warenkorb mit js+cookies

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung eines schwebenden Warenkorbs mithilfe von js+cookies. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Erstellen Sie einen „Warenkorb ohne Aktualisierung“, der „Floating“ und „DataList“ auf der „Produktlisten-Anzeigeseite“ kombiniert. Sie müssen nur den Gesamtpreis berechnen, ohne ihn aufzurufen zur Abrechnung auf eine separate Seite weitergeleitet. Ich habe einige Informationen gefunden und geändert. Das Beispiel lautet wie folgt:

Die Datei gwc.js lautet wie folgt:

// 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=&#39;test&#39; style=&#39;border:0px;&#39; ><tr><td width=&#39;40%&#39;>商品名称</td><td>单价(￥)</td><td>数量</td><td>小计</td></tr>";
 var OrderString=unescape(ReadOrderForm(&#39;24_OrderForm&#39;));//获取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=&#39;dd&#39;>";
  gwc+="<input title=&#39;填写想购买的数量,请使用合法数字字符&#39; style=&#39;width:10px;&#39; id=&#39;Num"+i+"&#39; type=&#39;text&#39; onkeyup=&#39;EveryCount();&#39;value=&#39;"+OneOrder[a]+"&#39;>";
  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=&#39;none&#39;;
}
else{document.getElementById(id).style.display=&#39;&#39;;
}
}
//<--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(&#39;;&#39;, 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(&#39;.&#39;)!=-1)
  {
    alert("数量输入错误！");
  }
  else
  {
    var mer_list=ReadOrderForm(&#39;24_OrderForm&#39;);
    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(&#39;此商品您已添加\n请进入订单修改数量！&#39;)
      }
      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=&#39;&#39;;expires=" + Then.toGMTString();
}
//<--End

Die Datei gwc.html lautet wie folgt:

<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(&#39;Cart&#39;)" />
 </div>
 <input type="button" value="加入商品1" onclick="SetOrderForm(&#39;NO1&#39;,&#39;商品1&#39;,&#39;1&#39;,&#39;3.5&#39;);WriteOrderInDiv();" />
 <input type="button" value="加入商品2" onclick="SetOrderForm(&#39;NO2&#39;,&#39;商品2&#39;,&#39;1&#39;,&#39;5.5&#39;);WriteOrderInDiv();" />
 <input type="button" value="加入商品3" onclick="SetOrderForm(&#39;NO3&#39;,&#39;商品3&#39;,&#39;1&#39;,&#39;10.5&#39;);WriteOrderInDiv();" />
 </div>
  <script>
  window.WriteOrderInDiv();
  </script>

Das Obige Die Funktion von js besteht darin, Bestellinformationen abzurufen und auszugeben, nachdem die Seite geöffnet wurde.

Das Beispiel ist in HTML geschrieben. Sie müssen nur die Parameter der Produktschaltfläche onclick="SetOrderForm('NO3','Product 3','1','10.5') hinzufügen. ; Binden Sie es und stellen Sie das äußere Div so ein, dass es auf der rechten Seite des Browsers schwebt.

Ich hoffe, dass dieser Artikel für die Javascript-Programmierung hilfreich ist.

Weitere JS+Cookies-Implementierung Informationen zu Floating-Warenkorb-Methoden finden Sie auf der chinesischen PHP-Website