购物车结算

2024-02-21 09:49:34
购物车结算样式:
<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}

    table{
        width: 1000px;
        border-collapse: collapse;
        border-color: #930;
        margin: 50px auto 0;
        user-select: none;
    }
    table tr td{
        width: 250px;
        height: 100px;
        text-align: center;
    }
    table tr.title td{
        height: 50px;
        background: #c36;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
    }
    table tr td img{
        display: block;
        width: auto;
        height: 70px;
        margin: 0 auto;
    }
    table tr td.number span{
        display: inline-block;
        font-size: 12px;
        text-align: center;
    }
    table tr td.number span.down,table tr td.number span.add{
        width: 30px;
        height: 30px;
        background: #ddd;
        line-height: 30px;
        cursor: pointer;
        font-weight: bold;
        font-size: 14px;
    }
    table tr td.number span.num{
        width: 50px;
        height: 28px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        line-height: 28px;
        color: #c36;
    }
    .box{
        width: 1000px;
        height: 50px;
        background: #c36;
        margin: 10px auto;
    }
    .box p{
        float: right;
        width: 250px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 14px;
    }
    .box p span{
        color: #f4e5a9;
        font-size: 16px;
        font-weight: bold;
    }


    </style>

</head>
<body>

    <table border="1">
        <thead></thead>
        <tbody>
            <tr class="title">
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
            <tr>
                <td><img src="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/img/shop1.jpg" alt=""></td>
                <td class="danjia">8</td>
                <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                <td class="price">0</td>
            </tr>
            <tr>
                <td><img src="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/img/shop2.jpg" alt=""></td>
                <td class="danjia">10</td>
                <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                <td class="price">0</td>
            </tr>
            <tr>
                <td><img src="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/img/shop3.jpg" alt=""></td>
                <td class="danjia">12.5</td>
                <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                <td class="price">0</td>
            </tr>
            <tr>
                <td><img src="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/img/shop4.jpg" alt=""></td>
                <td class="danjia">23</td>
                <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                <td class="price">0</td>
            </tr>
        </tbody>
    </table>

    <div class="box">
        <p class="totalPrice">合计费用： <span>0</span> ￥</p>
        <p class="totalNum">已选中商品： <span>0</span> 个</p>
    </div>



    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
        //购物车结账
        (function () {
            //整理数据,开发中学会整理数据,用数组的形式包裹
            let Price = [
                {danjia:8,num:0},
                {danjia:10,num:0},
                {danjia:12,num:0},
                {danjia:23,num:0}
            ]
            //获取标签的权限
            let Add = document.querySelectorAll(".add"),
                Down = document.querySelectorAll(".down"),
                AddLen = Add.length,
                Anum = document.querySelectorAll(".num"),
                Aprice = document.querySelectorAll(".price"),
                Oprcie = document.querySelector(".box .totalPrice span"),
                Onum = document.querySelector(".box .totalNum span")                
            
            //定义函数---用于HTML相关操作(封装函数)
            function change(i){
                //html的变化
                Anum[i].innerText = Price[i].num;
                Aprice[i].innerText = Price[i].danjia * Price[i].num;

                //通过循环，把所有的数据相加，把所有的小计价格相加
                let tPrice = 0 , tnum = 0
                for (let j = 0; j <AddLen; j++) {
                   tnum += Price[j].num;
                   tPrice += Price[j].danjia * Price[j].num;
                };
                //html的变化
                Onum.innerText = tnum;
                Oprcie.innerText = tPrice;
            }
            

            //点击事件
            for (let i = 0; i <AddLen; i++) {
               Add[i].onclick = function(){
                    Price[i].num ++;
                    /* console.log("点击了+"); */
                    //函数执行
                    change(i);
               }
               Down[i].onclick = function(){
                    if(Price[i].num === 0)return;   
                    Price[i].num --;
                    /* console.log("点击了-"); */
                    //函数执行
                    change(i);
               }
            };

        })();

    </script>
</body>
<!--
笔记区域




-->

</html>
样式展示
码农公寓

相关文章
