- 浏览: 407372 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (173)
- java 程序设计 (22)
- struct学习笔记 (11)
- spring学习笔记 (10)
- hibernate学习笔记 (5)
- oracle学习笔记 (2)
- javascript学习笔记 (17)
- jquery学习笔记 (10)
- CSS学习笔记 (16)
- 面向协议的编程 (1)
- jmf学习笔记 (1)
- EJB3.0学习 笔记 (3)
- linux学习笔记 (20)
- 云计算架构学习笔记 (1)
- php程序设计 (1)
- python程序设计 (0)
- 数据结构算法 (5)
- 数据库 (8)
- 数据库设计 (0)
- eclipse 插件 (3)
- resin (2)
- html5 (4)
- linux程序设计 (3)
- android开发 (0)
- 其他 (4)
- 服务器端脚本 (0)
- ruby程序设计 (0)
- perl程序设计 (0)
- 开放平台开发 (1)
最新评论
-
huxin889:
第三四张图片裂了
ant 打包 jar 可执行 -
leichenlei:
user.hashCode() 会出现负数,怎么处理?
mysql merge分表 -
niaoqq1:
不好使。来看看我的方法。js:var NodeArr=getS ...
java中如何在ajax发送参数的时候,参数以数组的方式传递到后数组台 -
zhijiandedaima:
为什么我的defaultCache是空,空指针异常啊
spring 整合memcache -
lt26i:
帮了大忙了向楼主学习
java中如何在ajax发送参数的时候,参数以数组的方式传递到后数组台
购物车实现3种方式
1、利用cookie
优点:不占用服务器资源,可以永远保存,不用考虑失效的问题
缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。
2、利用 session
优点:用户禁用cookie,也可以购物
缺点:占用服务器资源,要考虑session失效的问题
3、利用数据库
优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品
缺点:给数据库造成太大的压力,如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
在页面中引用
1、导入js文件
2、初始化shopCart对象
1、利用cookie
优点:不占用服务器资源,可以永远保存,不用考虑失效的问题
缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。
2、利用 session
优点:用户禁用cookie,也可以购物
缺点:占用服务器资源,要考虑session失效的问题
3、利用数据库
优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品
缺点:给数据库造成太大的压力,如果数据量很大的话。
购物车需求分析
1、可以添加商品到购物车中
2、可以删除购物车中的商品
3、可以清空购物车
4、可以更新购物车的商品
5、可以结算
/*** * 购物车操作模块 * */ 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 }; //商品类 /*** * @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; } //暴露给外部的接口方法 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);
在页面中引用
1、导入js文件
2、初始化shopCart对象
shopCart.init({ 'decimal' : 4 }); shopCart.addItem(item); //添加商品到购物车 shopCart.delItem('12345'); //从购物车中删除商品 shopCart.emptyCart(); //清空购物车 item.quantity = 4; alert(shopCart.getTotalPrice()); //获取购物车中的数量
发表评论
-
javascript 关闭当前窗口
2013-01-08 17:18 1028关闭当前浏览器窗口对象,兼容ie,chrome,不兼容fi ... -
获取Flickr最新上传的图片
2012-07-02 14:20 1079Show Most Recent Flickr Uploads ... -
javascript面向对象实现继承
2012-06-16 20:21 874第一种方式:对象冒充的方式,通过修改当前的this指针冒充父类 ... -
javascript操作cookie
2012-06-11 10:50 1011<html> <head> <s ... -
javascript检测浏览器类型
2012-06-09 22:41 1102开始通过navigator对象的appName,appVser ... -
javascript限制input输入的字节数
2012-06-09 17:53 8399由于中文是占用2个字符,而英文是1个字符,如果我们不分区英文和 ... -
javascript 闭包
2012-06-05 23:52 1000<SCRIPT LANGUAGE="JavaS ... -
javascript 监听 窗口关闭和页面刷新事件
2012-06-05 22:53 8786<!DOCTYPE HTML PUBLIC " ... -
javascript对象转字符串
2012-06-04 22:30 817function objectToString(o){ ... -
javascript 解析浏览器参数信息
2012-06-04 22:28 1125<!DOCTYPE HTML PUBLIC " ... -
javascript 实现对图片不失真的缩放
2012-06-03 22:04 3138<!DOCTYPE html PUBLIC " ... -
javascript 实现图片轮流播放效果
2011-10-21 17:38 1480<!DOCTYPE html PUBLIC " ... -
javascript 实现简单的弹窗
2011-10-21 16:54 915<!DOCTYPE html PUBLIC " ... -
javascript实现常用的表单前台数据的校验
2011-10-20 20:48 1496//一个工具的类,用来校验表单中一些常用的表单元素 v ... -
javascript实现简单的拖拽
2011-10-20 20:40 906<!DOCTYPE html PUBLIC " ... -
制作简单的悬浮效果
2011-10-20 20:26 1217<html> <head> <t ...
相关推荐
用javascript实现购物车特效
在本项目中,"原生JavaScript实现购物车"是一个典型的前端开发示例,它展示了如何使用JavaScript语言来创建一个交互式的购物车系统。这个系统可能包括添加商品、修改商品数量、计算总价等基本功能。接下来,我们将...
在JavaScript实现购物车功能的过程中,会涉及到多个关键知识点,这些技术是前端开发中不可或缺的部分。以下将详细阐述这些知识点: 1. **购物车计算价格**:这是购物车的核心功能之一,需要对每件商品的价格与数量...
实现效果: ... javascript实现购物车效果,通过原生js代码实现购物车效果,一般电商网站或者商城网站会使用到购物车的效果,点击加减,总价随之变化,选中商品,点击删除,可以删除选中的商品!
以上就是使用原生JavaScript实现购物车功能的基本步骤。当然,实际项目中可能还需要考虑更多细节,如商品库存检查、商品选择状态的管理、购物车数据的持久化等。通过这个例子,你可以了解到如何利用JavaScript实现...
在JavaScript实现购物车功能的过程中,我们通常会遇到多个关键知识点,包括数据存储、商品操作、数量管理、总价计算以及用户交互。以下是对这些知识点的详细解释: 1. **数据存储**:购物车中的商品信息需要被持久...
### JavaScript 实现购物车功能详解 #### 一、概述 在现代Web开发中,实现一个交互式的购物车功能是电商网站的基本需求之一。通过使用原生JavaScript,我们可以在不依赖任何框架的情况下完成这一任务。本篇文章将...
在JavaScript实现购物车功能时,我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明: 1. **前端交互**:在本例中,用户通过点击“我的购物车”按钮(`#btAdd`)来...
纯javascript实现购物车,完成从商品页向购物车中添加商品,购物车中删除商品,更改商品数量,删除商品,全选单选等购物车操作,涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作,综合性较强,对于...
在JavaScript实现购物车功能时,通常会涉及到多个技术点,包括DOM操作、事件处理、数据存储(如Cookie或LocalStorage)以及简单的数据结构处理。在这个示例中,我们看到的HTML结构是一个商品列表页面,其中的商品...
文件"order.html"可能就是一个包含了上述逻辑的HTML页面,展示了如何利用JavaScript实现购物车功能。在这个页面中,用户可以看到购物车中的商品列表、数量、总价等信息,并且能够进行添加、删除和修改商品的操作。 ...
在本项目中,我们将深入探讨如何使用JavaScript实现一个基本的购物车系统,同时结合Asp.net作为后端支持。 首先,JavaScript是客户端脚本语言,它在用户的浏览器上运行,为网页提供实时交互。在购物车场景中,...
以上就是JavaScript实现购物车功能的一些核心概念和技巧。通过这些知识点,我们可以构建一个基本的、交互式的购物车系统,提供添加、删除商品,以及修改商品数量等功能。在实际项目中,还需要考虑更多细节,如错误...
以上就是原生JavaScript实现购物车结算功能涉及的主要技术点。在这个过程中,JavaScript扮演了关键角色,实现了动态交互和数据管理,为用户提供了一个流畅、可靠的购物体验。在实际开发中,可以根据具体需求进行调整...
使用类JavaScript购物车该库提供了使用Vanilla JavaScript实现购物车的简单方法安装在HTML的BODY结束标记之前添加脚本: < script src =" /js/shoppingcart.js " > </ script >用法实例化ShoppingCart类...
JavaScript购物车是一个常见的Web开发应用场景,它...以上是JavaScript实现购物车功能的基本步骤和涉及的关键技术。实际开发中,还需要考虑到性能优化、兼容性问题以及安全等方面,确保购物车系统的稳定性和用户体验。
以上就是使用JavaScript实现购物车功能的基本步骤。实际项目中,可能还需要考虑其他因素,比如本地存储(localStorage)以持久化购物车数据、异步请求以同步购物车状态、以及优化用户体验的细节处理等。通过这些功能...
本篇文章将介绍如何使用JavaScript实现一个简单购物车的基本功能。这包括如何添加商品到购物车、全选或单个商品的选择、修改商品数量以及删除商品等功能。 首先,我们来看HTML结构部分。页面中有一个表格,表格的...
在这个项目中,我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作,这些都是电商网站必备的功能。 首先,我们要理解JavaScript的基本语法和数据类型,它是ECMAScript的一个实现,提供了变量...