js+cookies实现悬浮购物车的方法


Posted in Javascript onMay 25, 2015

本文实例讲述了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' 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程序设计有所帮助。

Javascript 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 #Javascript
js实现鼠标划过给div加透明度的方法
May 25 #Javascript
javascript实现youku的视频代码自适应宽度
May 25 #Javascript
微信WeixinJSBridge API使用实例
May 25 #Javascript
jquery.validate使用时遇到的问题
May 25 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
python基础教程之序列详解
2014/08/29 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
python paramiko模块学习分享
2017/08/23 Python
python决策树之C4.5算法详解
2017/12/20 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
在python中pandas的series合并方法
2018/11/12 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
解决python运行效率不高的问题
2020/07/20 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
简历中个人自我评价范文
2013/12/26 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
综治目标管理责任书
2015/05/11 职场文书
小学生运动会广播
2015/08/19 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
承诺书应该怎么写?
2019/09/10 职场文书