JavaScript - 购物单 -

最新推荐文章于 2022-11-29 09:39:51 发布

赵羽珩

最新推荐文章于 2022-11-29 09:39:51 发布

阅读量769

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_41170223/article/details/78884504

版权

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个购物清单的功能。用户可以通过点击加减按钮来增加或减少商品的数量，并实时更新商品数量、总价及最贵商品的价格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <input type="button" name="" value="-">
            <span>0</span>
            <input type="button" name="" value="+">
            单价: <em>12 </em>元
            小计: <strong>0</strong>元
        </li>
        <li>
            <input type="button" name="" value="-">
            <span>0</span>
            <input type="button" name="" value="+">
            单价: <em>112 </em>元
            小计: <strong>0</strong>元
        </li>
        <li>
            <input type="button" name="" value="-">
            <span>0</span>
            <input type="button" name="" value="+">
            单价: <em>2 </em>元
            小计: <strong>0</strong>元
        </li>
    </ul>
    <p>
        商品一共<span id="num">0</span>件<br>
        商品一共<span id="price">0</span>元<br>
        最贵的商品<span id="max">0</span>元
    </p>

    <script type="text/javascript">
        //获取整体元素
        var oList = document.getElementById('list');
        var aLi = oList.getElementsByTagName('li');
        var aSpan = oList.getElementsByTagName('span');
        var aEm = oList.getElementsByTagName('em');
        var aStrong = oList.getElementsByTagName('strong');

        function count() { //函数名：统计
            //获取统计元素
            var aNum = document.getElementById('num')
            var aPrice = document.getElementById('price');
            var aMax = document.getElementById('max');

            var num = 0;
            var price = 0;
            var max = 0
            for (var i = 0; i < aSpan.length; i++) {
                num += parseFloat(aSpan[i].innerHTML);
                price += parseFloat(aStrong[i].innerHTML);
                // 当aSpan值不为0时，才能进行比较
                if (aSpan[i].innerHTML != 0 ) {              //满足条件一
                    if (parseFloat(aEm[i].innerHTML) > max) {//满足条件二 . 这里也可以用 &&
                        max = parseFloat(aEm[i].innerHTML);  //才可以
                    }
                }
            }
            aNum.innerHTML = num;        //商品个数
            aPrice.innerHTML = price;    //商品总价
            aMax.innerHTML = max;        //商品最贵单价
        }

        function shoppingList(i) {     //函数名：购物单
            //获取每一个li里面的元素
            var aBtns = aLi[i].getElementsByTagName('input')
            var oSpan = aLi[i].getElementsByTagName('span')[0];
            var oEm = aLi[i].getElementsByTagName('em')[0];
            var oStrong = aLi[i].getElementsByTagName('strong')[0];
            var n = 0;
            //左右按钮点击事件
            aBtns[0].onclick = function () {
                n --;
                if (n < 0) {      //不能为负数
                    n = 0;
                }
                oSpan.innerHTML = n;             //个数
                oStrong.innerHTML = n * oEm.innerHTML;    //小计 = 个数*单价
                count();
            }
            aBtns[1].onclick = function () {
                n ++;
                oSpan.innerHTML = n;
                oStrong.innerHTML = n * oEm.innerHTML;
                count();
            }
        };
        for (var i = 0; i < aLi.length; i++) {
            shoppingList(i)    //传递参数  0，1，2
        };

    </script>
</body>
</html>