摘要:[javascript] ?utils = { ?? ? setParam : function (name,value){ ?? ? ? ? localStorage.setItem(name,value) ?

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

最近在做html5这一块,参考网上的代码写了一个购物车JS脚本,很简单,直接上代码,shoppingCart.js:

[javascript] ?

utils = { ?

? ? setParam : function (name,value){ ?

? ? ? ? localStorage.setItem(name,value) ?

? ? }, ?

? ? getParam : function(name){ ?

? ? ? ? return localStorage.getItem(name) ?

? ? } ?

} ?

??

product={ ?

? ? id:0, ??

? ? name:"", ?

? ? num:0, ?

? ? price:0.00, ?

}; ?

orderdetail={ ?

? ? username:"", ?

? ? phone:"", ?

? ? address:"", ?

? ? zipcode:"", ?

? ? totalNumber:0, ?

? ? totalAmount:0.00 ? ? ?

} ?

cart = { ?

? ? //向购物车中添加商品 ?

? ? addproduct:function(product){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? if(ShoppingCart==null||ShoppingCart==""){ ?

? ? ? ? ? ? //第一次加入商品 ?

? ? ? ? ? ? var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)}; ?

? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? }else{ ?

? ? ? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? ? ? var result=false; ?

? ? ? ? ? ? //查找购物车中是否有该商品 ?

? ? ? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? ? ? if(productlist[i].id==product.id){ ?

? ? ? ? ? ? ? ? ? ? productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num); ?

? ? ? ? ? ? ? ? ? ? result = true; ?

? ? ? ? ? ? ? ? } ?

? ? ? ? ? ? } ?

? ? ? ? ? ? if(!result){ ?

? ? ? ? ? ? ? ? //没有该商品就直接加进去 ?

? ? ? ? ? ? ? ? productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price}); ?

? ? ? ? ? ? } ?

? ? ? ? ? ? //重新计算总价 ?

? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num); ?

? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price)); ?

? ? ? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? ? ? //保存购物车 ?

? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? } ?

? ? }, ?

? ? //修改给买商品数量 ?

? ? updateproductnum:function(id,num){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? ??

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==id){ ?

? ? ? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num)); ?

? ? ? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price)); ?

? ? ? ? ? ? ? ? productlist[i].num=parseInt(num); ?

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? ? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? ? ? ? ? return; ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? }, ?

? ? //获取购物车中的所有商品 ?

? ? getproductlist:function(){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? return productlist; ?

? ? }, ?

? ? //判断购物车中是否存在商品 ?

? ? existproduct:function(id){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? var result=false; ?

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==product.id){ ?

? ? ? ? ? ? ? ? result = true; ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? ? ? return result; ?

? ? }, ?

? ? //删除购物车中商品 ?

? ? deleteproduct:function(id){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? var list=[]; ?

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==id){ ?

? ? ? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num); ?

? ? ? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price); ?

? ? ? ? ? ? }else{ ?

? ? ? ? ? ? ? ? list.push(productlist[i]); ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? ? ? jsonstr.productlist = list; ?

? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? } ?

}; ?

使用也很简单:

?

[javascript] ?

var product = ?

{ ?

? ? 'id': id, ? ? ? ?//属性名用引号括起来,属性间由逗号隔开 ?

? ? 'name': 'hhh', ?

? ? 'num':jq('#text-4').val(), ?

? ? 'price':199.9 ?

}; ?

//商品加入到购物车 ?

cart.addproduct(product); ?

var productlist=cart.getproductlist();//取出购物车商品 ?

alert('', '商品:'+productlist[0].id+' '+productlist[0].name+' '+productlist[0].num+' '+productlist[0].price, '确定'); ?

? ? ? ? ? ? ? ? ??

?

最近在做html5这一块,参考网上的代码写了一个购物车JS脚本,很简单,直接上代码,shoppingCart.js:

[javascript] ?

utils = { ?

? ? setParam : function (name,value){ ?

? ? ? ? localStorage.setItem(name,value) ?

? ? }, ?

? ? getParam : function(name){ ?

? ? ? ? return localStorage.getItem(name) ?

? ? } ?

} ?

??

product={ ?

? ? id:0, ??

? ? name:"", ?

? ? num:0, ?

? ? price:0.00, ?

}; ?

orderdetail={ ?

? ? username:"", ?

? ? phone:"", ?

? ? address:"", ?

? ? zipcode:"", ?

? ? totalNumber:0, ?

? ? totalAmount:0.00 ? ? ?

} ?

cart = { ?

? ? //向购物车中添加商品 ?

? ? addproduct:function(product){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? if(ShoppingCart==null||ShoppingCart==""){ ?

? ? ? ? ? ? //第一次加入商品 ?

? ? ? ? ? ? var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)}; ?

? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? }else{ ?

? ? ? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? ? ? var result=false; ?

? ? ? ? ? ? //查找购物车中是否有该商品 ?

? ? ? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? ? ? if(productlist[i].id==product.id){ ?

? ? ? ? ? ? ? ? ? ? productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num); ?

? ? ? ? ? ? ? ? ? ? result = true; ?

? ? ? ? ? ? ? ? } ?

? ? ? ? ? ? } ?

? ? ? ? ? ? if(!result){ ?

? ? ? ? ? ? ? ? //没有该商品就直接加进去 ?

? ? ? ? ? ? ? ? productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price}); ?

? ? ? ? ? ? } ?

? ? ? ? ? ? //重新计算总价 ?

? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num); ?

? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price)); ?

? ? ? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? ? ? //保存购物车 ?

? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? } ?

? ? }, ?

? ? //修改给买商品数量 ?

? ? updateproductnum:function(id,num){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? ??

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==id){ ?

? ? ? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num)); ?

? ? ? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price)); ?

? ? ? ? ? ? ? ? productlist[i].num=parseInt(num); ?

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? ? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? ? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? ? ? ? ? ? ? return; ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? }, ?

? ? //获取购物车中的所有商品 ?

? ? getproductlist:function(){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? return productlist; ?

? ? }, ?

? ? //判断购物车中是否存在商品 ?

? ? existproduct:function(id){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? var result=false; ?

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==product.id){ ?

? ? ? ? ? ? ? ? result = true; ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? ? ? return result; ?

? ? }, ?

? ? //删除购物车中商品 ?

? ? deleteproduct:function(id){ ?

? ? ? ? var ShoppingCart = utils.getParam("ShoppingCart"); ?

? ? ? ? var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length)); ?

? ? ? ? var productlist = jsonstr.productlist; ?

? ? ? ? var list=[]; ?

? ? ? ? for(var i in productlist){ ?

? ? ? ? ? ? if(productlist[i].id==id){ ?

? ? ? ? ? ? ? ? jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num); ?

? ? ? ? ? ? ? ? jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price); ?

? ? ? ? ? ? }else{ ?

? ? ? ? ? ? ? ? list.push(productlist[i]); ?

? ? ? ? ? ? } ?

? ? ? ? } ?

? ? ? ? jsonstr.productlist = list; ?

? ? ? ? orderdetail.totalNumber = jsonstr.totalNumber; ?

? ? ? ? orderdetail.totalAmount = jsonstr.totalAmount; ?

? ? ? ? utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr)); ?

? ? } ?

}; ?

使用也很简单:

?

[javascript] ?

var product = ?

{ ?

? ? 'id': id, ? ? ? ?//属性名用引号括起来,属性间由逗号隔开 ?

? ? 'name': 'hhh', ?

? ? 'num':jq('#text-4').val(), ?

? ? 'price':199.9 ?

}; ?

//商品加入到购物车 ?

cart.addproduct(product); ?

var productlist=cart.getproductlist();//取出购物车商品 ?

alert('', '商品:'+productlist[0].id+' '+productlist[0].name+' '+productlist[0].num+' '+productlist[0].price, '确定'); ?

? ? ? ? ? ? ? ? ??

?

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!?html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/html5%e6%95%99%e7%a8%8b/html5%e6%95%99%e7%a8%8b_3017.html