js实现购物车功能
时间:2019-04-20
本文章向大家介绍js实现购物车功能,主要包括js实现购物车功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下
购物车实现3种方式
1、利用cookie
优点:不占用服务器资源,可以永远保存,不用考虑失效的问题
缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。
2、利用 session
优点:用户禁用cookie,也可以购物
缺点:占用服务器资源,要考虑session失效的问题
3、利用数据库
优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品
缺点:给数据库造成太大的压力,如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
js代码
/** * Created by Administrator on 2017/9/3. */ /*** * 购物车操作模块 * */ //商品类 /*** * @name item * @example item(sku, name, price, quantity) * @params {string} sku 商品的标示 * @params {string} name 商品的名字 * @param {number} price 商品的价格 * @param {number} quantity 商品的数量 */ function item(sku, name, price, quantity){ this.sku = sku; this.name = name; this.price = price; this.quantity = quantity; } var shopCart = function(window){ "use strict"; //全局变量 // note new new Date("2020-12-23") 在ie下面报错,不支持这样的语法 var items = [],cartName='kuaidian_shop_cart',expires = new Date( new Date().getTime()+86400000*30 ) ,debug = true,decimal = 2; var options = { 'cartName' : cartName, //cookie的名字 'expires' : expires, //cookie失效的时间 'debug' : debug, //是否打印调试信息 'decimal' : decimal, //钱的精确到小数点后的位数 'callback' : undefined }; //暴露给外部的接口方法 return { inited : false, init: function(option){ //判断用户是否禁用cookie if(!window.navigator.cookieEnabled ){ alert('您的浏览器不支持cookie无法使用购物车!,请设置允许设置cookie。'); return false; } //从cookie中获取购物车中的数据 this.inited = true; if(option){ extend(options,option); } var cookie = getCookie(options.cartName); if(typeof cookie === 'undefined'){ setCookie(options.cartName,'',options.expires); }else{ //每个item之间用&分开,item的属性之间用|分割 var cookie = getCookie(options.cartName); if(cookie){ var cItems = cookie.split('&'); for(var i=0,l=cItems.length;i<l;i++){ var cItem = cItems[i].split('|'); var item = {}; item.sku = cItem[0] || ''; item.name = cItem[1] || ''; item.price = cItem[2] || ''; item.quantity = cItem[3] || ''; items.push(item); }; }; }; }, findItem: function(sku){//根据sku标示查找商品 //如果木有提供sku,则返回所有的item if(sku){ for(var i=0,l=items.length;i<l;i++){ var item = items[i]; if(item.sku === sku){ return item; } } return undefined; }else{ return items; } }, getItemIndex : function(sku){ //获取item在items的数组下标 for(var i=0,l=items.length;i<l;i++){ var item = items[i]; if(item.sku == sku){ return i; } } //木有找到返回-1 return -1; }, addItem: function(item){ //增加一个新商品到购物车 //添加一个商品 if(this.findItem(item.sku)){ if(options.debug){ _log('商品已经存在了'); return false; } } items.push(item); _saveCookie(); return true; }, delItem: function(sku){ //从购物车中删除一个商品 //删除一个商品 var index = this.getItemIndex(sku); if(index > -1){ items.splice(index,1); _saveCookie(); }else{ if(options.debug){ _log('商品不存在'); return false; } } }, updateQuantity: function(item){ //更新商品的数量 //更新一个商品 var index = this.getItemIndex(item.sku); if(index > -1){ items[index].quantity = item.quantity; _saveCookie(); }else{ if(options.debug){ _log('商品不存在'); return false; } } }, emptyCart: function(){ //清空数组 items.length = 0; _saveCookie(); }, checkout: function(){ //点击结算后的回调函数 if(options.callback){ options.callback(); } }, getTotalCount: function(sku){ //获取购物车商品的数量,如果传某个商品的id,那么就返回该商品的数量 var totalCount = 0; if(sku){ totalCount = (typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity ); }else{ for(var i=0,l=items.length;i<l;i++){ totalCount += (parseInt(items[i].quantity) === 'NaN' ? 0 : parseInt(items[i].quantity )) ; } } return totalCount; }, getTotalPrice : function(sku){ //获取购物车商品的总价格 ,如果传某个商品的id,那么就返回该商品的总价格 var totalPrice = 0.0; if(sku){ var num = parseInt((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity )), price = parseFloat((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).price )); num = num=== 'NaN' ? 0 : num; price = price === 'NaN' ? 0 : price; totalPrice = price * num; }else{ for(var i=0,l=items.length;i<l;i++){ totalPrice += (parseFloat(items[i].price ) * parseInt(items[i].quantity)); } } return totalPrice.toFixed(options.decimal); }, getCookie : getCookie, setCookie : setCookie }; /** * 设置cookie * @name setCookie * @example setCookie(name, value[, options]) * @params {string} name 需要设置Cookie的键名 * @params {string} value 需要设置Cookie的值 * @params {string} [path] cookie路径 * @params {Date} [expires] cookie过期时间 */ function setCookie(name, value, options) { options = options || {}; var expires = options.expires || null; var path = options.path || "/"; var domain = options.domain || document.domain; var secure = options.secure || null; /** document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + "; path=" + path + "; domain=" + domain ; + ((secure) ? "; secure" : ""); */ var str = name + "=" + encodeURIComponent(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + "; path=/"; document.cookie = str; }; /** * 获取cookie的值 * @name getCookie * @example getCookie(name) * @param {string} name 需要获取Cookie的键名 * @return {string|null} 获取的Cookie值,获取不到时返回null */ function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) { return decodeURIComponent(arr[2]); } return undefined; }; //***********************私有方法********************/ function _saveCookie(){ var i=0,l=items.length; if(l>0){ var tItems = []; for(;i<l;i++){ var item = items[i]; tItems[i] = item.sku + '|' +item.name + '|' + item.price + '|' + item.quantity; }; var str = tItems.join('&'); setCookie(options.cartName, str, {expires:options.expires}); }else{ setCookie(options.cartName, '', {expires:options.expires}); } }; //***********************工具方法********************/ //显示调试信息 function _log(info){ if(typeof console != 'undefined'){ console.log(info); } }; //继承属性 function extend(destination, source) { for ( var property in source) { destination[property] = source[property]; } }; }(typeof window === 'undifined' ? this: window);
HTML页面简单调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="./shop.js"></script> <script> shopCart.init({ 'decimal' : 4 }); var a = new item('aa','bb',12,22); shopCart.addItem(a); //添加商品到购物车,参数item shopCart.delItem('12345'); //从购物车中删除商品,参数squ // shopCart.emptyCart(); //清空购物车 item.quantity = 4; alert(shopCart.getTotalPrice()); //获取购物车中的数量,参数squ shopCart.findItem();//根据sku标示查找商品,参数squ //如果木有提供sku,则返回所有的item shopCart.getItemIndex('aa') //获取item在items的数组下标,参数squ shopCart.updateQuantity(a) //更新商品的数量,参数item shopCart.getTotalCount()//获取购物车商品的数量,如果传某个商品的id,那么就返回该商品的数量,参数squ </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- AkShare-股票数据-龙虎榜-机构席位追踪
- AkShare-股票数据-龙虎榜-营业上榜统计
- AkShare-股票数据-龙虎榜-个股上榜统计
- React中路由的使用
- CyanX 基于ReactHook的状态管理器,遵循函数式编程的理念,极简、可扩展设计哲学上手
- Serverless 架构下如何实现日志的实时输出?
- typescript基础篇(1):helloworld
- typescript基础篇(2):数据类型
- 22款好用的CLI工具
- typescript基础篇(3):接口
- 2020 年,苹果的 AI 还有创新吗?
- 毕设有着落了!一套开源的,基于SpringBoot的车牌识别系统
- 详解hive的join优化
- 区块链时代的世界宪章:代码即法律
- SQL 计算公司的期初资产