JavaScript原生实现购物车功能

最新推荐文章于 2023-08-05 12:18:34 发布
最新推荐文章于 2023-08-05 12:18:34 发布
阅读量1.4k 收藏 29
点赞数 4
分类专栏： 前端基础学习 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44337050/article/details/127453101
版权

效果图：

 实现功能：
        1、点击加减按钮需要修改商品的  单个商品的金额，以及总计金额
        2、删除按钮，需要将当前商品整行移除，可能需要修改总金额(勾选上)
        3、当勾选商品之后，需要计算总金额
        4、全选按钮，需要计算总金额

代码实现：

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

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="cart.css">
</head>

<body>
    <div id="app">
        <div class="shoppingBar">
            <h2>购物清单</h2>
            <!-- 购物车商品 -->
            <table>
                <tbody>
                    <tr>
                        <th><input type="checkbox" title="全选" class="selectAll"></th>
                        <th>商品名称</th>
                        <th>数量</th>
                        <th>单价（元）</th>
                        <th>金额（元）</th>
                        <th>操作</th>
                    </tr>

                    <!-- 电视机 -->
                    <tr class="commodity">
                        <th>
                            <input type="checkbox" class="input" value="1">
                        </th>
                        <th class="content">
                            <img src="img/TV.jpeg" width="100px" height="100px">
                            <p>电视机 </p>
                        </th>
                        <th>
                            <button type="button" class="decr">
                                -
                            </button>
                            <span>
                                1
                            </span>
                            <button type="button" class="incr">
                                +
                            </button>
                        </th>
                        <th>
                            200
                        </th>
                        <th class="money">
                            200
                        </th>
                        <th>
                            <span class="glyphicon glyphicon-remove">删除</span>
                        </th>
                    </tr>

                    <!-- 洗衣机 -->
                    <tr class="commodity">
                        <th>
                            <input type="checkbox" class="input" value="2">
                        </th>
                        <th class="content">
                            <img src="img/xiyiji.jpeg" width="100px" height="100px">
                            <p>洗衣机 </p>
                        </th>
                        <th>
                            <button type="button" class="decr">
                                -
                            </button>
                            <span>
                                1
                            </span>
                            <button type="button" class="incr">
                                +
                            </button>
                        </th>
                        <th>
                            150
                        </th>
                        <th class="money">
                            150
                        </th>
                        <th>
                            <span class="glyphicon glyphicon-remove">删除</span>
                        </th>
                    </tr>

                    <!-- 冰箱 -->
                    <tr class="commodity">
                        <th>
                            <input type="checkbox" class="input" value="3">
                        </th>
                        <th class="content">
                            <img src="img/bingx.jpeg" width="100px" height="100px">
                            <p>冰箱</p>
                        </th>
                        <th>
                            <button type="button" class="decr">
                                -
                            </button>
                            <span>
                                1
                            </span>
                            <button type="button" class="incr">
                                +
                            </button>
                        </th>
                        <th>
                            100
                        </th>
                        <th class="money">
                            100
                        </th>
                        <th>
                            <span class="glyphicon glyphicon-remove">删除</span>
                        </th>
                    </tr>
                </tbody>
            </table>
            <!-- 底部金额 -->
            <div class="shoppingBar-footer">
                <div class="manage">
                    <span class="delAll">
                        删除所选商品
                    </span>
                    <span class="return">
                        继续购物
                    </span>
                </div>

                <button id="go" type="button">
                    去结算
                </button>
                <div class="buy">商品总计:
                    <span>
                        ￥0
                    </span>
                </div>
            </div>

        </div>
    </div>
</body>
<!-- <button id="test">测试按钮</button> -->

</html>

<script>


    // 测试按钮
    // document.querySelector('#test').onclick = function () {
    //     getTotal();
    // }

    // 计算勾选商品的总金额
    function getTotal() {
        // 存放总金额
        var total = 0;
        // 找到被勾选商品计算总金额
        document.querySelectorAll('.input:checked').forEach(function (dom) {
            console.log(dom);//每一个被勾选的input标签
            // 找到被勾选商品的单价---input标签父元素的兄弟元素
            total += parseFloat(dom.parentElement.parentElement.querySelector('.money').innerHTML.trim())
        })
        // 把勾选商品的单价同步到底部总金额
        document.querySelector('.buy>span').innerHTML = '￥' + total;
    }


    // 实现删除功能
    document.querySelectorAll('.glyphicon-remove').forEach(function (dom) {
        // 给每一个删除按钮绑定点击事件
        dom.onclick = function () {
            // 删除整行
            document.querySelector('tbody').removeChild(this.parentElement.parentElement);
            // 更新总金额
            getTotal();
            // 判断商品是否全部删除，全部删除则去掉全选
            document.querySelector('.selectAll').checked = (document.querySelectorAll('.input').length == document.querySelectorAll('.input:checked').length);
            if (document.querySelectorAll('.input').length == 0) {
                document.querySelector('.selectAll').checked = false;
            }
        }

    })

    // 实现数量的增加
    document.querySelectorAll('.incr').forEach(function (dom) {
        // 给每一个加号绑定点击事件
        dom.onclick = function () {
            console.log(this);//button标签
            // 修改数量 --- 找到button上一个元素(数量) previousElementSibling
            var count = this.previousElementSibling.innerHTML.trim() - 0 + 1;
            this.previousElementSibling.innerHTML = count;
            // 获取点击商品的单价  --  找到存放单价的span标签
            var price = this.parentElement.nextElementSibling.innerHTML.trim();
            // 计算点击商品的总价 -- 找到存放总价的th标签
            this.parentElement.nextElementSibling.nextElementSibling.innerHTML = count * parseFloat(price);
            getTotal();
        }
    })

    // 实现数量的减少
    document.querySelectorAll('.decr').forEach(function (dom) {
        // 给每一个减号绑定点击事件
        dom.onclick = function () {
            // 修改数量 ---  先获取数量 
            var count = this.nextElementSibling.innerHTML.trim() - 0;
            if (count <= 1) {
                alert('不能再减啦！');
                return;
            }
            this.nextElementSibling.innerHTML = count - 1;

            // 获取点击商品的单价  --  找到存放单价的span标签
            var price = this.parentElement.nextElementSibling.innerHTML.trim();
            // 计算点击商品的总价 -- 找到存放总价的th标签
            this.parentElement.nextElementSibling.nextElementSibling.innerHTML = count * parseFloat(price);
            getTotal();
        }
    })


    // 实现全选功能
    document.querySelector('.selectAll').onclick = function () {
        // 保存全选按钮的勾选状态，得到是一个布尔值
        var selectAllChecked = this.checked;
        document.querySelectorAll('.input').forEach(function (dom) {
            // 把全选的状态赋值给单选按钮
            dom.checked = selectAllChecked;
        })
        getTotal();
    }

    // 给单选框绑定点击事件 ---- arr input数组
    document.querySelectorAll('.input').forEach(function (dom, index, arr) {
        dom.onclick = function () {
            // console.log(arr);
            // 实现单选商品添加总价
            getTotal();
            // 判断单选按钮是否全部勾选上了
            // document.querySelector('.selectAll').checked = (arr.length == document.querySelectorAll('.input:checked').length);
            // 上下等同
            document.querySelector('.selectAll').checked = (document.querySelectorAll('.input').length == document.querySelectorAll('.input:checked').length);
        }
    })

</script>
body{
	margin: 0;
	padding: 0;
	height: auto;
	text-decoration: none;
	list-style: none;
	font-size: 12px;
	background-color: #F5F5F5;
}

 .shoppingBar {
      width: 1130px;
      border: 2px solid #F5F5F5;
      margin: 40px auto;
      position: relative;
      background-color: white;
      font-size: 16px;
    }

    .shoppingBar h2 {
      height: 60px;
      line-height: 60px;
      color: black;
      text-indent: 40px;
    }
    .shoppingBar table {
      width: 100%;
      margin-bottom: 60px;
    }
    .shoppingBar table .money{
    	color: red;
    }
    .shoppingBar table .commodity{
    	border: 3px solid #F5F5F5;
    	height: 150px;
    }
    .shoppingBar>table tr th input{
    	width: 25px;
    	height: 25px;
    	margin-left: 30px;
    }
    .shoppingBar table tr:first-of-type {
      height: 80px;
      color: #424242;
      font-size: 14px;
      border-top: 1px solid #F5F5F5;
      border-bottom: 1px solid #F5F5F5;
    }
    .shoppingBar table tr th img {
      width: 120px;
      height: 100px;
      float: left;
    }

    .shoppingBar table tr th p {
      float: right;
      width: 100px;
      font-size: 18px;
      color: #424242;
    }

    .shoppingBar table tr .content {
      width: 220px;
      padding: 0 100px;
    }

    .shoppingBar table tr #delete {
      cursor: pointer;
      font-size: 20px;
    }
    
    .shoppingBar table tr #delete:hover{
    	color: red;
    }
    
    .shoppingBar .shoppingBar-footer {
      border: 1px solid #F5F5F5;
      width: 1130px;
      height: 60px;
      position: absolute;
      margin-top: 10px;
      color: #757575;
      font-size: 14px;
      background-color: white;
    }

    .shoppingBar .shoppingBar-footer .manage {
      float: left;
      height: 40px;
    }

    .shoppingBar .shoppingBar-footer .manage .delAll,
    .return { 
      cursor: pointer;
      background: #F5F5F5;
      color: #757575;
      line-height: 60px;
      margin: 0px 30px;
    }
    .shoppingBar .shoppingBar-footer .manage .delAll,
    .return:hover{
    	color: #FF6700;
    	transition: all 0.5s ease-in-out; 
    }
    .shoppingBar .shoppingBar-footer .buy {
      float: right;
      height: 40px;
      line-height: 60px;
    }

    .shoppingBar .shoppingBar-footer #go {
      float: right;
      height: 60px;
      width: 110px;
      font-weight: 400;
      font-size: 18px;
      outline: none;
      background-color: #E0E0E0;
      border: none;
      border-radius: 2px;
      margin-left: 10px;
      cursor: pointer;
      color: white;
    }
    .shoppingBar .shoppingBar-footer .active{
    	background-color: #FF6700;
    }
    .shoppingBar .shoppingBar-footer .buy span {
      font-weight: bold;
      font-size: 30px;
      color: red;
    }
    .shoppingBar .shoppingBar-footer #go:hover{
    	background-color: red;
    	transition: all 0.5s ease 0s;
    }

小彭彭同学
关注
  • 4
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现购物车动态功能
weixin_30933531的博客
05-25 5691
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
Js购物车功能实现
前端程序媛_Ying博客
12-04 667
购物车功能实现
JS实现简单的购物车
dxn16638400024的博客
06-30 3205
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
vscode——VUE 书籍购物车
weixin_44901175的博客
07-20 1257
B站vuejs视频中的案例 成果如下：
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
原生js实现购物车全选效果
最新发布
weixin_68854196的博客
08-05 386
购物车一键全选的功能
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于...
原生JavaScript实现购物车
01-12
自己用原生JavaScript写的一个购物车的网页，里面有一些简单的功能，根据数量计算价钱之类的
原生JS实现购物车本地存储
08-18
利用原生js和本地存储技术实现购物车功能
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
JS实现加入购物车
01-14
JS实现加入购物车
web-原生js实现购物车
01-14
提起购物车想必只有在一些购物网站上才可以看得到,下面为大家介绍下使用js实现的购物车,感兴趣的朋友可以参考下
原生js实现淘宝购物车功能
10-20
主要向大家推荐一个原生js实现淘宝购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现购物车效果.zip
07-11
实现效果： ... javascript实现购物车效果,通过原生js代码实现购物车效果，一般电商网站或者商城网站会使用到购物车的效果，点击加减，总价随之变化，选中商品，点击删除，可以删除选中的商品！
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 7125
JavaScript 购物车
原生js实现购物车的加减与全选，反选功能
weixin_44537264的博客
03-04 1716
效果请看底部图片 html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;购物车&lt;/title&gt; &lt;link rel="stylesheet" type="text/css&quot
JS&JQ添加购物车功能
qq_50822277的博客
12-30 3793
啥也不说。直接上代码！！！！ 第一步。引入script src=“jquery-3.3.1.min.js” 第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部 下面这些才是函数里面的东西、 添加购物车！！！！ 第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价 //获取购物车标签#goods tr td a $('#go.
js制作的简易购物车
Curtain的博客
08-16 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 简易购物车 function cal(){ var num= parseInt(document.myform.num.value);
用Visual Studio Code帮我写一个简单购物车
04-29
好的，以下是一个简单的购物车程序的代码： ```python items = {"apple": 1.5, "banana": 0.5, "orange": 2.0} # 商品和价格 cart = {} # 购物车 while True: print("请选择您需要的操作：") print("1. 添加商品到购物车") print("2. 从购物车中删除商品") print("3. 查看购物车") print("4. 结算") print("5. 退出程序") choice = input("请输入操作编号：") if choice == "1": item = input("请输入商品名称：") if item in items: if item in cart: cart[item] += 1 else: cart[item] = 1 print(f"{item}已添加到购物车。") else: print("该商品不存在，请重新输入。") elif choice == "2": item = input("请输入要删除的商品名称：") if item in cart: cart[item] -= 1 if cart[item] == 0: del cart[item] print(f"{item}已从购物车中删除。") else: print("购物车中没有该商品，请重新输入。") elif choice == "3": if len(cart) == 0: print("购物车为空。") else: print("购物车中的商品：") for item, count in cart.items(): print(f"{item} × {count} = {count * items[item]}") elif choice == "4": if len(cart) == 0: print("购物车为空，不能结算。") else: total = sum(count * items[item] for item, count in cart.items()) print(f"应付款金额为：{total}元。") cart.clear() # 清空购物车 elif choice == "5": break else: print("输入错误，请重新输入。") print("谢谢惠顾，欢迎下次光临！") ``` 运行程序后，会出现一个菜单，可以根据需要选择相应的操作。其中： - “添加商品到购物车”：输入商品名称，如果商品存在，则将其加入购物车中。 - “从购物车中删除商品”：输入商品名称，如果购物车中存在该商品，则将其从购物车中删除。 - “查看购物车”：显示当前购物车中的商品及其数量和价格。 - “结算”：计算购物车中所有商品的总价，并清空购物车。 - “退出程序”：结束程序运行。 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值