jquery.cookie实现的客户端购物车操作实例


Posted in Javascript onDecember 24, 2015

本文实例讲述了jquery.cookie实现的客户端购物车操作。分享给大家供大家参考,具体如下:

//购物车
var Cart = function () {
  this.Count = 0;
  this.Total = 0;
  this.Items = new Array();
};
//购物车集合对象
var CartItem = function () {
  this.Id = 0;
  this.Name = "";
  this.Count = 0;
  this.Price = 0;
};
 
//购物车操作
var CartHelper = function () {
  this.cookieName = "yxhCart";
  this.Clear = function () {
    var cart = new Cart();
    this.Save(cart);
    return cart;
  };
  //向购物车添加
  this.Add = function (id, name, count, price) {
    var cart = this.Read();
    var index = this.Find(id);
    //如果ID已存在,覆盖数量
    if (index > -1) {
      cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
      cart.Items[index].Count = count;
      cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
    } else {
      var item = new CartItem();
      item.Id = id;
      item.Name = name;
      item.Count = count;
      item.Price = price;
      cart.Items.push(item);
      cart.Count++;
      cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
    }
    this.Save(cart);
    return cart;
  };
  //改变数量
  this.Change = function (id, count) {
    var cart = this.Read();
    var index = this.Find(id);
    cart.Items[index].Count = count;
    this.Save(cart);
    return cart;
  };
  //移出购物车
  this.Del = function (id) {
    var cart = this.Read();
    var index = this.Find(id);
    if (index > -1) {
      var item = cart.Items[index];
      cart.Count--;
      cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);
      cart.Items.splice(index, 1);
      this.Save(cart);
    }
    return cart;
  };
  //根据ID查找
  this.Find = function (id) {
    var cart = this.Read();
    var index = -1;
    for (var i = 0; i < cart.Items.length; i++) {
      if (cart.Items[i].Id == id) {
        index = i;
      }
    }
    return index;
  };
  //COOKIE操作
  this.Save = function (cart) {
    var source = "";
    for (var i = 0; i < cart.Items.length; i++) {
      if (source != "") { source += "|$|"; }
      source += this.ItemToString(cart.Items[i]);
    }
    $.cookie(this.cookieName, source);
  };
  this.Read = function () {
    //读取COOKIE中的集合
    var source = $.cookie(this.cookieName);
    var cart = new Cart();
    if (source == null || source == "") {
      return cart;
    }
    var arr = source.split("|$|");
    cart.Count = arr.length;
    for (var i = 0; i < arr.length; i++) {
      var item = this.ItemToObject(arr[i]);
      cart.Items.push(item);
      cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
    }
    return cart;
  };
  this.ItemToString = function (item) {
    return item.Id + "||" + escape(item.Name) + "||" + item.Count + "||" + item.Price;
  };
  this.ItemToObject = function (str) {
    var arr = str.split('||');
    var item = new CartItem();
    item.Id = arr[0];
    item.Name = unescape(arr[1]);
    item.Count = arr[2];
    item.Price = arr[3];
    return item;
  };
};

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 #Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 #Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 #Javascript
jquery遍历函数siblings()用法实例
Dec 24 #Javascript
jQuery中的siblings用法实例分析
Dec 24 #Javascript
You might like
PHP的博客ping服务代码
2012/02/04 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python实现mean-shift聚类算法
2020/06/10 Python
python Pexpect模块的使用
2020/12/25 Python
Pandas之缺失数据的实现
2021/01/06 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
渗透攻击的测试步骤
2014/06/07 面试题
优秀求职信范文分享
2013/12/19 职场文书
新教师培训方案
2014/06/08 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
电话营销开场白
2015/05/29 职场文书
庆元旦主持词
2015/07/06 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers