【JS】购物车附带源码与素材图片压缩包

实现简单购物车

html部分

<div class="header">
        <ul>
            <li><input type="checkbox" name="quan" onclick="all2(this)">全选</li>
            <li class='li2'>商品图片</li> 
            <li>数量</li>
            <li>单价</li>
            <li>商品名称</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
        <div class='clear'></div>
    </div>
    <div class='content'>
        <ul>
            <li><input type="checkbox" name="xuan" onclick="radio1()"></li>
            <li class='li2'><img src="./img/1.jpg" width="100"></li> 
            <li>
                <button onclick="jian(this)">-</button>
                <button>1</button>
                <button onclick="add1(this)">+</button>
            </li>
            <li>￥<span>2200.00</span></li>
            <li>数码相机</li>
            <li>￥<span>2200.00</span></li>
            <li><button onclick="del(this)">删除</button></li>
            <div class='clear'></div>
        </ul>
        
        <ul>
            <li><input type="checkbox" name="xuan" onclick="radio1()"></li>
            <li class="li2"><img src="./img/2.jpg" width="100"></li> 
            <li>
                <button onclick="jian(this)">-</button>
                <button>1</button>
                <button onclick="add1(this)">+</button>
            </li>
            <li>￥<span>2300.00</span></li>
            <li>家用相机</li>
            <li>￥<span>2300.00</span></li>
            <li><button onclick="del(this)">删除</button></li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class='floot'>
        <button onclick="delAll()">全删</button>
        <button onclick="addGood()">添加商品</button>
        已选商品总计：￥<span>00.00</span>
        店铺合计：￥<span>00.00</span>
    </div>

**

css部分

**

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .header,.content,.floot{
            width: 800px;
            margin:0px auto;
        }
        .header ul li,.content ul li{
            float: left;
            list-style: none;
            width: 100px;
            line-height: 100px;
            text-align: center;
        }
        .clear{
            clear:both
        }
        .li2{
            width: 200px;
        }
        button{
            padding: 2px 5px;
        }
    </style>

**

JS部分

**

 <script>
        //获取操作对象
        var header=document.querySelector('.header')
        var content=document.querySelector('.content')
        var floot=document.querySelector(".floot")
        //获取所有的选中框对象
        // var xuans=content.querySelectorAll('[name="xuan"]')
        var xuans=document.getElementsByName("xuan")
        //全选
        function all2(btn){
            //遍历每一个选中框对象
            for(var i=0;i<xuans.length;i++){
                //判断全选框是否被选中
                if(btn.checked){
                    xuans[i].checked=true
                }else{
                    xuans[i].checked=false
                }
            }
            totalXuan()
        }
        //选中框
        function radio1(){
            //获取全选框对象
            var quan=header.querySelector('[name="quan"]')
            var a=0 //统计被选中的次数
            //遍历所有选中框对象
            for(var i=0;i<xuans.length;i++){
                //判断选中框是否被选中
                if(xuans[i].checked){
                    a++
                }
            }
            //判断被选中的次数是否等于选中框的长度
            if(a==xuans.length){
                quan.checked=true
            }else{
                quan.checked=false
            }
            totalXuan()
        }
        //加法
        function add1(btn){
            //获取数量
            var num=btn.previousElementSibling.innerHTML
            //修改数量
            num++
            //重新把数量赋值给指定位置
            btn.previousElementSibling.innerHTML=num
            //获取单价
            var price=btn.parentNode.nextElementSibling.lastElementChild.innerHTML
            //计算小计
            var sum=num*parseFloat(price)
            //重新给小计赋值
            // btn.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.lastElementChild.innerHTML=sum
            btn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sum
            totalHe()
            totalXuan()
        }
        //减法
        function jian(btn){
            //获取数量
            var num=btn.nextElementSibling.innerHTML
            if(num<=1){
                num=1
            }else{
                num--
            }
            //重新给数量赋值
            btn.nextElementSibling.innerHTML=num
             //获取单价
             var price=btn.parentNode.nextElementSibling.lastElementChild.innerHTML
            //计算小计
            var sum=num*parseFloat(price)
            //重新给小计赋值
            btn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sum
            totalHe()
            totalXuan()
        }
        //删除
        function del(btn){
            btn.parentNode.parentNode.remove()
            totalHe()
            totalXuan()
        }
        //全删
        function delAll(){
            //遍历每一个选中框对象
            for(var i=xuans.length-1;i>=0;i--){
                //判断当前选中框是否被选中
                if(xuans[i].checked){
                    //删除当前商品
                    xuans[i].parentNode.parentNode.remove()
                }
            }
            totalHe()
            totalXuan()
        }
        m=3 //图片名称
        //添加商品
        function addGood(){
            //创建ul标签
            var newUl=document.createElement('ul')
            //给当前新节点添加内容
            newUl.innerHTML='<li><input type="checkbox" name="xuan" οnclick="radio1()"></li>'
            +'<li class="li2"><img src="./img/'+m+'.jpg" width="100"></li>'
            +'<li>'
                +'<button οnclick="jian(this)">-</button>'
                +' <button>1</button>'
                +' <button οnclick="add1(this)">+</button>'
                +'</li>'
                +'<li>￥<span>3300.00</span></li>'
                +'<li>索尼相机</li>'
                +'<li>￥<span>3300.00</span></li>'
                +'<li><button οnclick="del(this)">删除</button></li>'
                +'<div class="clear"></div>'
            //把当前新节点追加到content对象中
            content.appendChild(newUl)
            m++
            if(m>7){
                m=1
            }
            totalHe()
            totalXuan()
            radio1()
        }

        //店铺合计
        function totalHe(){
            //获取所有商品
            var uls=content.querySelectorAll("ul")
            var sum=0//合计
            //遍历每一个商品
            for(var i=0;i<uls.length;i++){
                //获取每个商品的小计
                var num=uls[i].children[5].lastElementChild.innerHTML
                sum+=parseFloat(num)
            }
            //给店铺合计赋值
            floot.lastElementChild.innerHTML=sum
        }
        totalHe()

        //已选商品总计
        function totalXuan(){
            var sum=0//商品总计
            //遍历每一个选中框对象
            for(var i=0;i<xuans.length;i++){
                //判断当前选中框是否被选中
                if(xuans[i].checked){
                    //获取当前被选中的商品小计
                    var num=xuans[i].parentNode.parentNode.children[5].lastElementChild.innerHTML
                    sum+=parseFloat(num)
                }
            }
            //给已选商品总计赋值
            floot.lastElementChild.previousElementSibling.innerHTML=sum
        }
        totalXuan()
    </script>

**

附带图片与html文件：https://download.csdn.net/download/ican965/18417663

**