JavaScript_购物车的功能

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #addGoodContent{
            border-radius: 5px;
            padding: 10px;
            border: 1px solid #000;
            line-height: 30px;
            width: 400px;
        }
        #addGoodContent>span{
            display: inline-block;
            width: 100px;
            letter-spacing: 5px;
        }
        #goodList{
            overflow: hidden;
            margin: 10px 50px;
        }
        .item{
            padding: 10px;
            float: left;
            width: 372px;
            height: 154px;
            overflow: hidden;
            color: #333;
            background-color: #f7f9fa;
            border: 1px solid #f7f9fa;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            flex-direction: row;
        }
        .left{
            margin-right: 10px;
        }
        .left>img{
            width: 150px;
            height: 150px;
        }
        .right>h4{
            color: #333;
            font-size: 18px;
            line-height: 23px;
            margin: 5px 0;
        }
        .right>p{
            font-size: 14px;
            line-height: 22px;
            height: 80px;
        }
        .right span{
            color: red;
        }



        .small{
            width: 100px;
        }
</style>

 <!-- 添加商品 -->
    <h2>添加商品</h2>
    <div id="addGoodContent">
        <span>商品名</span> <input type="text"><br>
        <span>商品价格</span> <input type="text"><br>
        <span>商品详情</span> <br> <textarea type="text"></textarea><br>
        <span style="width: 150px;">商品的图片</span> <input type="text"><br>
        <button id="save">添加商品</button>
    </div>
    <h2>商品列表</h2>
    <ul id="goodList">
       
    </ul>
    <a href="">去购物车页面</a>



    <table border="1px">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"> 全选</th>
                <th>
                    商品名
                </th>
                <th>
                    商品图片
                </th>
                <th>
                    商品详情
                </th>
                <th>
                    商品价格
                </th>
                <th>
                    商品个数
                </th>
                <th>
                    小计
                </th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
        <tfoot>
           <tr>
            <td id="counts">已选 0</td>
             <td colspan="8" align="right"> 合计 ￥<span class="totalPrice">0</span></td>
           </tr>
        </tfoot>
</table>

<script>
        //加入商品的功能 cookie来存储的 （大小只有4kb）
        //localStorage 本地存储 他和cookie都是位于浏览器上 但是俩个的大小和特性不一样（5M）
        function addGood(goodName,goodPrice,info,imgUrl){
            //先取出商品列表本身有的数据
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
            //生成一个id
            var id = Date.now()+Math.random().toFixed(2)
            //初始化一个对象 存储对应的数据
            var good = {
                id,
                goodName,
                goodPrice,
                info,
                imgUrl
            }
            //加给localStroage
            goodList.push(good)
            addGoodToUl(good)
            localStorage.setItem("goodList",JSON.stringify(goodList))
        }
        //获取ul
        var ul = document.getElementById('goodList')
        randerGoodList()
        //给按钮添加事件
        document.querySelector('#save').onclick = function(){
            //获取所有输入的内容
            var inputs = document.querySelectorAll('input')
            var info = document.querySelector('textarea').value
            //调用添加的方法
            addGood(inputs[0].value,Number(inputs[1].value),info,inputs[2].value)
        }
        //商品列表渲染的功能
        function randerGoodList(){
            //根据localstroage里面存的数据 进行渲染
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
            //遍历这个数组进行渲染
            for(var good of goodList){
                addGoodToUl(good)
            }
        }
        function addGoodToUl(good){
            ul.innerHTML += `
                <li class="item">
                    <div class="left">
                        <img src="${good.imgUrl}" alt="">
                    </div>
                    <div class="right">
                        <h4>${good.goodName}</h4>
                        <p>${good.info}</p>
                        <div>
                            <span>￥<b>${good.goodPrice}</b></span>
                            <button onclick="addCar(${good.id})">加入购物车</button>
                        </div>
                    </div>
                </li>
                `
        }
        //加入购物车的功能
        function addCar(id){
            //通过id取出对应的对象
            var item = {}
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
            //遍历这个数组进行渲染
            for(var good of goodList){
              if(id == good.id){
                item = good
              }
            }
            //先取出之前购物车的东西
            var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
            //count 里面具备id 
            var flag = false //默认为没有
            //查找当前的car里面的内容是否具备这个id
            for(var good of car){
                if(good.id == item.id){  //如果有这个id count++
                    good.count++
                    flag = true
                }
            }
            if(!flag){ // 如果没有这个id count为1
                item.count = 1
                car.push(item)
            }
            //重新设置到localstorage里面去
            localStorage.setItem('car',JSON.stringify(car))
            location.reload()
        }
</script>

<script>
    //购物车数据渲染
    // 数据显示在tbody里面
    var tbody = document.querySelector('tbody')
    //调用渲染方法
    randerList()
    function randerList(){
        var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
        //先要去localstorage拿对应的购物车数据 car
        //遍历
        for(var good of car){
            tbody.innerHTML += `
            <tr>
                <td>
                    <input type="checkbox" class='check'>
                </td>
                <td>
                    ${good.goodName}
                </td>
                <td>
                    <img class="small" src="${good.imgUrl}" alt="">
                </td>
                <td>
                    ${good.info}
                </td>
                <td>
                    ￥<span>${good.goodPrice}</span> 
                </td>
                <td>
                    <button class="btn" ${good.count==1?"disabled='disabled'":""} onclick='changeCount(${good.id})'>-</button>
                    <input type="number" value="${good.count}">
                    <button class="btn" onclick='changeCount(${good.id},true)' >+</button>
                </td>
                <td>
                    ￥<span>${good.goodPrice*good.count}</span>
                </td>
                <td>
                    <button onclick="rm(${good.id})">移除购物车</button>
                </td>
            </tr>
            `
        }

    }
    //全选功能
    var selectAll = document.querySelector('#selectAll')
    var checks = document.querySelectorAll('.check')
    //给全选功能做操作
    selectAll.onclick = function(){
        for(var i=0;i<checks.length;i++){
           checks[i].checked = this.checked
        }
        computedPrice()
        computedCounts()
    }
    //给每个添加点击事件
    for(var i=0;i<checks.length;i++){
        checks[i].onclick = function(){
            computedPrice()
            computedCounts()
            if(isSelectAll()){
                selectAll.checked = true
            }
        }
    }
    //判断是否全选的方法 如果全选返回true 如果不是返回false
    function isSelectAll(){
        var count = 0
        for(var i=0;i<checks.length;i++){
            if(checks[i].checked){
                count++
            }
        }
       return count==checks.length
    }
    //计算价格的方法
    function computedPrice(){
            var prices = 0
            var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
            console.log(`car`, car);
            for(var i=0;i<checks.length;i++){
                if(checks[i].checked){
                    prices +=(car[i].count * car[i].goodPrice)
                }
            }
            //再给到totalPrice
            document.querySelector('.totalPrice').innerText = prices
    }
    //计算数量的方法
    function computedCounts(){
            var  counts = 0
            var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
            console.log(`car`, car);
            for(var i=0;i<checks.length;i++){
                if(checks[i].checked){
                    counts +=(car[i].count)
                }
            }
            //再给到totalPrice
            document.querySelector('#counts').innerText = `数量${counts}`
    }
    //添加数量 //减少数量
    function changeCount(id,isAdd){
        var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
        //根据这个id获取对应的商品
        for(var good of car){
            if(id == good.id){
                if(isAdd){
                    good.count++
                }else{
                    good.count--
                }
            }
        }
        //重新设置进去
        localStorage.setItem('car',JSON.stringify(car))
        //重新渲染
        // tbody.innerHTML = ""
        // randerList()
        location.reload()
    }
    //移除购物车的方法
    function rm(id){
        var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
        var index = -1
        //根据这个id获取对应的商品
        for(var i in car){
            if(id ==car[i].id){
                index = i
            }
        }
        car.splice(index,1)
        //重新设置进去
        localStorage.setItem('car',JSON.stringify(car))
        //重新渲染
        location.reload()
    }
</script>