利用JavaScript实现简单的购物车功能

最新推荐文章于 2022-06-22 16:49:41 发布

海阔天空ZMZ

最新推荐文章于 2022-06-22 16:49:41 发布

阅读量817

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 购物车

本文链接：https://blog.youkuaiyun.com/weixin_45457515/article/details/99761544

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何利用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>
</head>
<body>
    <ul>
        <li>
            <button class="btn">-</button><span class="num">0</span><button class="btn">+</button> 单价:<span class="num">12.5元</span> 总价 : <span class="num">0元</span>
        </li>
        <li>
            <button class="btn">-</button><span class="num">0</span><button class="btn">+</button> 单价:<span class="num">13.5元</span> 总价 : <span class="num">0元</span>
        </li>
        <li>
            <button class="btn">-</button><span class="num">0</span><button class="btn">+</button> 单价:<span class="num">14.5元</span> 总价 : <span class="num">0元</span>
        </li>
        <li>
                <button class="btn">-</button><span class="num">0</span><button class="btn">+</button> 单价:<span class="num">15.5元</span> 总价 : <span class="num">0元</span>
            </li>
    </ul>
    <p>总件数:<strong>0</strong> 总价格:<strong>0</strong>元</p>
    <script>
        var oul = document.getElementsByTagName('ul')[0];
        var oli = oul.getElementsByTagName('li');
        var str = document.querySelector('p').getElementsByTagName('strong')
        for(var i=0;i<oli.length;i++){
            fn(oli[i])
        }
       
        function fn(x){
            var btn = x.querySelectorAll('.btn');
            var num = x.querySelectorAll('.num');

            var len = parseInt(num[0].innerHTML);
            btn[1].onclick = function(){
                len++;
                fun()
                
            }
            btn[0].onclick = function(){
                len--;
                if(len<0){
                    len = 0
                }
                fun()
                
            }
        
        function fun(){
            num[0].innerHTML = len;
            num[2].innerHTML = len * parseFloat(num[1].innerHTML)+'元';
            var all = 0
            var allP = 0
            for(var i=0;i<oli.length;i++){
                all+=oli[i].querySelectorAll('.num')[0].innerHTML * 1
                allP+=parseFloat(oli[i].querySelectorAll('.num')[2].innerHTML)
            }
            str[0].innerHTML = all;
            str[1].innerHTML = allP;
        }
    }




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