购物车效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>12.6</span>元
            小计：<i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>11.9</span>元
            小计：<i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>17.3</span>元
            小计：<i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>10.3</span>元
            小计：<i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>4.5</span>元
            小计：<i>0</i>元
        </li>
    </ul>

    <script>
        window.onload = function () {
            var lis = document.getElementsByTagName('li');

            for(var i=0;i<lis.length;i++){  // 0,1,2,3,4
                calc(lis[i])
            }           

            function calc(a) {
                var btn = a.getElementsByTagName('button');
                var b = a.getElementsByTagName('b')[0];
                var span = a.getElementsByTagName('span')[0];
                var i = a.getElementsByTagName('i')[0];

                // 数量增加
                btn[1].onclick = function () {

                    var num = parseInt(b.innerHTML);
                    num++;
                    // 数量变化
                    b.innerHTML = num;
                    // 小计变化
                    i.innerHTML = (num * span.innerHTML).toFixed(2);
                }

                // 数量减少
                btn[0].onclick = function () {
                    var num = parseInt(b.innerHTML);
                    num--;
                    if (num < 0) {
                        num = 0;
                        alert('不能再减少了')
                    }
                    // 数量变化
                    b.innerHTML = num;
                    // 小计变化
                    i.innerHTML = (num * span.innerHTML).toFixed(2);
                }
            }
        }
    </script>
</body>

</html>

 

效果

 

posted @ 2020-07-03 13:38  石海莹  阅读(169)  评论(0)  编辑  收藏  举报