购物车案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>购物车</title>

    <style>

        table{

            border-collapse: collapse;

        }

        td,th{

            text-align: center;

            border:1px solid #ccc;

            padding: 2px 10px;

        }

        td img{

            width: 100px;

        }

        td input{

            width: 40px;

            text-align: center;

            outline: none;

        }

    </style>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th><input id="ckAll" type="checkbox">全选</th>

                <th>商品名称</th>

                <th>商品图片</th>

                <th>商品价格</th>

                <th>购买数量</th>

                <th>小计</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="7" style="text-align: right;">

                    <span>总计:</span>

                    <span id="total"></span>

                </td>

            </tr>

        </tfoot>

    </table>

    <script>

        //定义一个商品数组

        let goodses = [

            {

                name:'iphone手机',

                img:'https://img13.360buyimg.com/n7/jfs/t1/137629/3/23805/201521/61aa1b26Eda614739/0a66ec0ce614c97c.jpg',

                price:5999,

                count:5,

                isck:false

            },

            {

                name:'华为手机',

                img:'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg',

                price:6289,

                count:2,

                isck:true

            },

            {

                name:'小米手机',

                img:'https://img10.360buyimg.com/n7/jfs/t1/160230/34/12049/58798/60484a63Edd19d4bb/401ca05f7e2f047f.jpg',

                price:2899,

                count:7,

                isck:false

            },

            {

                name:'三星手机',

                img:'https://img10.360buyimg.com/n7/jfs/t1/199895/25/19291/124250/61a9cd69E951b2336/bf9855e517120b39.jpg',

                price:9399,

                count:3,

                isck:false

            }

        ]


        //加载商品信息

        function loadGoodses(){

            //循环商品数组

            goodses.forEach(g=>{

                // 每个商品信息,创建一个对应的tr

                let tr = document.createElement('tr')

                // 每个tr里面有7个td

                let td1 = document.createElement('td')

                // 每一个商品对应的那个复选框

                let ck = document.createElement('input')

                ck.type = 'checkbox'

                ck.className = 'ck'   //注意:这里只是加一个标记

                // 设置复选框的选中状态

                ck.checked = g.isck

                // 注册复选框状态发生改变后事件

                ck.onchange = function(){

                    //更新商品的状态

                    g.isck = ck.checked

                    //再次调用计算总计的方法

                    totalPrice()

                    // 判断是否需要更新全选复选框的状态

                    document.querySelector('#ckAll').checked = goodses.every(r=>r.isck)

                }

                td1.appendChild(ck)

                let td2 = document.createElement('td')

                td2.innerHTML = g.name

                let td3 = document.createElement('td')

                let img = document.createElement('img')

                img.src = g.img

                td3.appendChild(img)

                // td4显示单价

                let td4 = document.createElement('td')

                td4.innerHTML = '¥'+g.price.toFixed(2)

                let td5 = document.createElement('td')

                // 减按钮

                let btn1 = document.createElement('button')

                btn1.innerHTML = '-'

                // 给减按钮注册点击事件

                btn1.onclick = function(){

                    g.count--  //商品数量减1

                    // 购买数量不能小于1

                    if(g.count<1) g.count=1

                    // 更新商品数量

                    count.value = g.count

                    // 更新商品小计

                    td6.innerHTML = '¥'+(g.price * g.count).toFixed(2)

                    //再次调用计算总计的方法

                    totalPrice()

                }

                td5.appendChild(btn1)

                // 文本框

                let count = document.createElement('input')

                count.value = g.count  //设置文本框的值

                td5.appendChild(count)

                let btn2 = document.createElement('button')

                btn2.innerHTML = '+'

                // 给加按钮注册点击事件

                btn2.onclick = function(){

                    g.count ++  //商品数量加1

                    //更新界面

                    count.value = g.count

                    td6.innerHTML = '¥'+(g.price * g.count).toFixed(2)

                    //再次调用计算总计的方法

                    totalPrice()

                }

                td5.appendChild(btn2)

                // td6里面显示的是单个商品的小计

                let td6 = document.createElement('td')

                td6.innerHTML = '¥'+(g.price * g.count).toFixed(2)

                let td7 = document.createElement('td')

                let del = document.createElement('button')

                del.innerHTML = '删除'

                // 给删除按钮注册点击事件

                del.onclick = function(){

                    //删除tr标签

                    tr.remove()

                    // 获取当前商品在数组中的索引

                    let index = goodses.findIndex(r=>r.name===g.name)

                    //删除数组中的原始数据

                    goodses.splice(index,1)

                    //再次调用计算总计的方法

                    totalPrice()

                }

                td7.appendChild(del)

                // 将所有的td添加到tr中

                tr.appendChild(td1)

                tr.appendChild(td2)

                tr.appendChild(td3)

                tr.appendChild(td4)

                tr.appendChild(td5)

                tr.appendChild(td6)

                tr.appendChild(td7)

                // 将tr添加到tbody中

                document.querySelector('tbody').appendChild(tr)

            })

        }  

        //调用加载商品信息的方法

        loadGoodses()

        //计算总计的方法

        function totalPrice(){

            //计算出总计

            let money = goodses.filter(r=>r.isck).reduce((a,b)=>a+b.count*b.price,0)

            //显示总计

            document.querySelector('#total').innerHTML = '¥'+money.toFixed(2)

        }

        //调用计算总计的方法

        totalPrice()

        //给全选复选框注册状态改变后事件

        document.querySelector('#ckAll').onchange = function(){

            let cks = document.querySelectorAll('.ck')

            //更新DOM

            cks.forEach(ck=>{

                ck.checked = this.checked

            })

            //更新数据

            goodses.forEach(g=>{

                g.isck = this.checked

            })

            //再次调用计算总计的方法

            totalPrice()

        }

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容