利用js写购物车简单功能

最新推荐文章于 2024-05-17 13:52:13 发布

IT小虎

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量148

点赞数

分类专栏： JavaScript js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47195969/article/details/128628056

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

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

<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>Document</title>
    <style>
        input {
            width: 50px;
            height: 28px;
            font-size: 25px;
            text-align: center;
        }
        .sumprice {
            color: red;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="button" class="jian" value="-">
        <input type="text" value="0">
        <input type="button" class="jia" value="+">
        单价: <span class="price">6</span>元/个 &emsp; 总价:<span class="sumprice">0</span>元
    </div>
    <div id="box1">
        <input type="button" class="jian" value="-">
        <input type="text" value="0">
        <input type="button" class="jia" value="+">
        单价: <span class="price">8</span>元/个 &emsp; 总价:<span class="sumprice">0</span>元
    </div>
    <div id="box2">
        <input type="button" class="jian" value="-">
        <input type="text" value="0">
        <input type="button" class="jia" value="+">
        单价: <span class="price">9</span>元/个 &emsp; 总价:<span class="sumprice">0</span>元
    </div>
    <p>总数量: <span>0</span>&emsp;&emsp;&emsp; 合计: <span>0</span></p>
    <script>
        // 1.封装函数
        function fun(id) {
            var divID = document.getElementById(id);
            var inputArr = divID.querySelectorAll('input');
            var price = divID.querySelector('.price');
            var sumPrice = divID.querySelector('.sumprice');
            inputArr[0].onclick = function() {
                var iptVal = inputArr[1].value;
                if (iptVal <= 0) {
                    iptVal = 0;
                } else {
                    iptVal--;
                    inputArr[1].value = iptVal;
                }
                var iptVal = inputArr[1].value;
                var priceVal = price.innerHTML;
                var sump = iptVal * priceVal;
                sum();
            }
            inputArr[1].onblur = function() {
                var iptVal = inputArr[1].value;
                if (iptVal <= 0) {
                    inputArr[1].value = 0;
                    alert('数量最少为0');
                } else if (iptVal >= 10) {
                    inputArr[1].value = 10;
                    alert('数量最多为10');
                }
            }
            inputArr[2].onclick = function() {
                var iptVal = inputArr[1].value;
                if (iptVal >= 10) {
                    iptVal = 10;
                } else {
                    iptVal++;
                    inputArr[1].value = iptVal;
                }
                var iptVal = inputArr[1].value;
                var priceVal = price.innerHTML;
                var sump = iptVal * priceVal;
                sumPrice.innerHTML = sump;
                sum();
            }
        }
        // 2.遍历div调用函数
        var divlist = document.getElementsByTagName('div');
        for (var i = 0; i < divlist.length; i++) {
            fun(divlist[i].id);
        }
        // 3. 封装总数函数
        function sum() {
            var iptlist = document.querySelectorAll("input[type='text']");
            var sumpriceList = document.querySelectorAll('.sumprice');
            var p = document.querySelector('p');
            var sumNum = p.querySelectorAll('span')[0];
            var amount = p.querySelectorAll('span')[1];
            var sumnum = 0;
            var sumprice = 0;
            for(var i = 0; i < iptlist.length; i++) {
                sumnum += parseInt(iptlist[i].value);
                sumprice += parseInt(sumpriceList[i].innerHTML);
            }
            sumNum.innerHTML = sumnum;
            amount.innerHTML = sumprice;
        }
    </script>
</body>

</html>