js实现简单的购物车功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <script type="text/javascript">
        /**
         * 功能分析
         *      1.统计购物车中所有商品的数量
         *      2.增加|减少单品数量
         *      3.可以删除单品
         *      4.清空购物车
         *      5.小文本框可以直接修改商品数量
         */
        function Cart(){
            this.take=function(){//取数据,该方法运行完毕以后,this.storage一定是一个数组
                this.storage=window.localStorage.getItem("KFC");//localStorage中获取出来的是字符串
                /**
                 * 当前用户是否是新用户
                 * 如果是新用户,浏览器中没有"KFC"对应的商品信息,getItem()==null
                 * 如果是重复使用的用户,可能有购物车的信息。
                 */
                if(!this.storage){
                    this.storage=[];
                }else{
                    this.storage=JSON.parse(this.storage);
                }
            };
            this.save=function(){//将内存中的数据再保存到localStorage中
                window.localStorage.setItem("KFC",JSON.stringify(this.storage));
            };
            this.plus=function(_identify,_counter,_config){//增加购物车单品数量
                /**
                 * 将商品加入购物车之前,要考虑原来的购物车中是否有该商品
                 * 如果有该商品,数量增加
                 * 如果没有该商品,新产生一条商品购物信息
                 */
                let _has=0;
                this.take();
                for(var i=0;i<this.storage.length;i++){
                    if(this.storage[i]["ID"]===_identify && this.storage[i]["config"]===_config){
                        this.storage[i]["counter"]+=_counter;
                        _has=1;
                        break;
                    }
                }
                //需要比较完毕以后才能知道购物车中是否有该商品
                if(_has===0){
                    this.storage.push({
                        "ID":_identify,
                        "config":_config,
                        "counter":_counter
                    });
                }
                this.save();
            };
            this.subtract=function(_identify,_counter,_config){//减少购物车单品数量
                this.take();
                for(var i=0;i<this.storage.length;i++){
                    if(this.storage[i]["ID"]===_identify && this.storage[i]["config"]===_config){
                        if(this.storage[i].counter>_counter){
                            this.storage[i].counter-=_counter;
                        }else{
                            this.storage.splice(i,1);
                        }
                        this.save();
                        break;
                    }
                }
            };
            this.statistics=function(){//统计
                let _summary=0;
                this.take();
                for(var i=0;i<this.storage.length;i++){
                    _summary+=this.storage[i].counter;
                }
                return _summary;
            };
            this.remove=function(_identify,_config){//移除单品
                this.take();
                for(var i=0;i<this.storage.length;i++){
                    if(this.storage[i]["ID"]===_identify && this.storage[i]["config"]===_config){
                        this.storage.splice(i,1);
                        this.save();
                        break;
                    }
                }
            };
            this.clear=function(){//清空购物车
                this.storage=[];
                this.save();
            };
            this.change=function(){
                this.take();
                for(var i=0;i<this.storage.length;i++){
                    var _input=document.getElementById("summary");                   
                    this.storage[i]["counter"]=Number(_input.value);
                    this.save();
                }
            };
            
        }
        window.onload=function(){//测试
            var _cart=new Cart();
            document.getElementById("plus").onclick=function(){
                _cart.plus(this.getAttribute("identify"),1,"红色|M");
                document.getElementById("summary").value=_cart.statistics();
            };
            document.getElementById("sub").onclick=function(){
                _cart.subtract(this.getAttribute("identify"),1,"红色|M");
                document.getElementById("summary").value=_cart.statistics();
            };
            document.getElementById("summary").value=_cart.statistics();
            document.getElementById("summary").onchange=function(){
                _cart.change();
            };
            document.getElementById("clear").onclick=function(){
                _cart.clear();
                document.getElementById("summary").value="0";
            };       
        };
    </script>
</head>
<body>
    <input type="button" id="plus" value="+" identify="M427">
    <input type="text" id="summary" value="0" identify="M427" style="width:20px;text-align: center;">
    <input type="button" id="sub" value="-" identify="M427">
    <input type="button" id="clear" value="清空购物车" identify="M427">
</body>
</html>

你可能感兴趣的:(javascript小案例)