• 基于html5 localStorage的购物车JS脚本


    http://blog.csdn.net/wangqiuyun/article/details/8435649

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

    [javascript] view plain copy
     
    1. utils = {  
    2.     setParam : function (name,value){  
    3.         localStorage.setItem(name,value)  
    4.     },  
    5.     getParam : function(name){  
    6.         return localStorage.getItem(name)  
    7.     }  
    8. }  
    9.   
    10. product={  
    11.     id:0,  
    12.     name:"",  
    13.     num:0,  
    14.     price:0.00,  
    15. };  
    16. orderdetail={  
    17.     username:"",  
    18.     phone:"",  
    19.     address:"",  
    20.     zipcode:"",  
    21.     totalNumber:0,  
    22.     totalAmount:0.00      
    23. }  
    24. cart = {  
    25.     //向购物车中添加商品  
    26.     addproduct:function(product){  
    27.         var ShoppingCart = utils.getParam("ShoppingCart");  
    28.         if(ShoppingCart==null||ShoppingCart==""){  
    29.             //第一次加入商品  
    30.             var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)};  
    31.             utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));  
    32.         }else{  
    33.             var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
    34.             var productlist = jsonstr.productlist;  
    35.             var result=false;  
    36.             //查找购物车中是否有该商品  
    37.             for(var i in productlist){  
    38.                 if(productlist[i].id==product.id){  
    39.                     productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num);  
    40.                     result = true;  
    41.                 }  
    42.             }  
    43.             if(!result){  
    44.                 //没有该商品就直接加进去  
    45.                 productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price});  
    46.             }  
    47.             //重新计算总价  
    48.             jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num);  
    49.             jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price));  
    50.             orderdetail.totalNumber = jsonstr.totalNumber;  
    51.             orderdetail.totalAmount = jsonstr.totalAmount;  
    52.             //保存购物车  
    53.             utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));  
    54.         }  
    55.     },  
    56.     //修改给买商品数量  
    57.     updateproductnum:function(id,num){  
    58.         var ShoppingCart = utils.getParam("ShoppingCart");  
    59.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
    60.         var productlist = jsonstr.productlist;  
    61.           
    62.         for(var i in productlist){  
    63.             if(productlist[i].id==id){  
    64.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num));  
    65.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price));  
    66.                 productlist[i].num=parseInt(num);  
    67.                   
    68.                 orderdetail.totalNumber = jsonstr.totalNumber;  
    69.                 orderdetail.totalAmount = jsonstr.totalAmount;  
    70.                 utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));  
    71.                 return;  
    72.             }  
    73.         }  
    74.     },  
    75.     //获取购物车中的所有商品  
    76.     getproductlist:function(){  
    77.         var ShoppingCart = utils.getParam("ShoppingCart");  
    78.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
    79.         var productlist = jsonstr.productlist;  
    80.         orderdetail.totalNumber = jsonstr.totalNumber;  
    81.         orderdetail.totalAmount = jsonstr.totalAmount;  
    82.         return productlist;  
    83.     },  
    84.     //判断购物车中是否存在商品  
    85.     existproduct:function(id){  
    86.         var ShoppingCart = utils.getParam("ShoppingCart");  
    87.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
    88.         var productlist = jsonstr.productlist;  
    89.         var result=false;  
    90.         for(var i in productlist){  
    91.             if(productlist[i].id==product.id){  
    92.                 result = true;  
    93.             }  
    94.         }  
    95.         return result;  
    96.     },  
    97.     //删除购物车中商品  
    98.     deleteproduct:function(id){  
    99.         var ShoppingCart = utils.getParam("ShoppingCart");  
    100.         var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));  
    101.         var productlist = jsonstr.productlist;  
    102.         var list=[];  
    103.         for(var i in productlist){  
    104.             if(productlist[i].id==id){  
    105.                 jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num);  
    106.                 jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price);  
    107.             }else{  
    108.                 list.push(productlist[i]);  
    109.             }  
    110.         }  
    111.         jsonstr.productlist = list;  
    112.         orderdetail.totalNumber = jsonstr.totalNumber;  
    113.         orderdetail.totalAmount = jsonstr.totalAmount;  
    114.         utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));  
    115.     }  
    116. };  

    使用也很简单:

    [javascript] view plain copy
     
      1. var product =  
      2. {  
      3.     'id': id,        //属性名用引号括起来,属性间由逗号隔开  
      4.     'name': 'hhh',  
      5.     'num':jq('#text-4').val(),  
      6.     'price':199.9  
      7. };  
      8. //商品加入到购物车  
      9. cart.addproduct(product);  
      10. var productlist=cart.getproductlist();//取出购物车商品  
      11. alert('', '商品:'+productlist[0].id+' '+productlist[0].name+' '+productlist[0].num+' '+productlist[0].price, '确定');  
  • 相关阅读:
    5G网络逐渐普及TSINGSEE青犀视频云边端架构网页视频实时互动直播系统又将如何发展?
    【开发记录】TSINGSEE青犀视频云边端架构Visual Studio 2017自建WebRTC中peerconnection_client编译报无法解析错误
    安防视频云服务平台EasyCVR视频智能分析系统运行控制台报404错误如何排查?
    一对一或一对多音视频通话会议系统可以通过哪些方式实现?
    TSINGSEE青犀视频云边端视频智能分析平台开发VMware下安装Ubuntu系统后无法安装VMwaretools问题解决
    最简单的Windows套接字(Socket)例子(源码,实例)
    KJAVA虚拟机Hack笔记实现MIDP的SLAVE事件模型
    系统程序员成长计划你的数据放在哪里(下)
    使用new实现realloc操作
    KJava虚拟机hack笔记基于GTK的移植
  • 原文地址:https://www.cnblogs.com/zaifeng0108/p/7226429.html
Copyright © 2020-2023  润新知