前端学习-第二阶段-day05

最新推荐文章于 2020-12-29 21:16:04 发布

澜痕

最新推荐文章于 2020-12-29 21:16:04 发布

阅读量76

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/111464039

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

练习目标，写个商品清单，自动计算分类总价，和所有分类总价之和

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all_price {
            margin-top: 10px;
            border-top: 1px solid #ccc;
            width: 280px;
            text-align: right;
        }
    </style>
</head>

<body>

    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>12.5</span><span></span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>8.5</span><span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>20</span><span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>100</span><span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>518</span><span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>单价：</span><span>888</span><span>元 小计：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <div class="all_price">总计：0元</div>
    <script>
        var oLi = document.getElementsByTagName("li");
        for (i = 0; i < oLi.length; i++) {
            price(oLi[i]);
        }

        function price(n) {
            var all_price = document.getElementsByTagName("div")[0];
            var oBtn1 = n.getElementsByTagName("button")[0];
            var oBtn2 = n.getElementsByTagName("button")[1];
            var oSpan1 = n.getElementsByTagName("span")[0];
            var oSpan2 = n.getElementsByTagName("span")[2];
            var em = n.getElementsByTagName("em")[0];
            var inner = Number(oSpan1.innerHTML);
            var unitPrice = Number(oSpan2.innerHTML);

            oBtn1.onclick = function () {
                inner -= 1;
                if (inner < 1) {
                    inner = 0;
                }
                oSpan1.innerHTML = inner;
                em.innerHTML = inner * unitPrice;
                var c = 0;
                for (i = 0; i < oLi.length; i++) {
                    var h = document.getElementsByTagName("li")[i].getElementsByTagName("em")[0].innerHTML;
                    c += -(-h);
                }
                all_price.innerHTML = "总计：" + c + "元";
            }

            oBtn2.onclick = function () {
                inner += 1;
                oSpan1.innerHTML = inner;
                em.innerHTML = inner * unitPrice;
                var c = 0;
                for (i = 0; i < oLi.length; i++) {
                    var h = oLi[i].getElementsByTagName("em")[0].innerHTML;
                    c += -(-h);
                }
                all_price.innerHTML = "总计：" + c + "元";
            }
        }
    </script>
</body>


</html>

澜痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-第二阶段-day05

练习目标，写个商品清单，自动计算分类总价，和所有分类总价之和<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
复制链接

扫一扫