js前端实现购物车功能（数量增加，总价增减）

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量949 收藏 6
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63448468/article/details/133638137
版权

实现效果：

实现代码：

<!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>
    .fruit-list{
        /* 让div位于同一行 */
        display: flex;
        /* 挤不下换行 */
        flex-wrap: wrap;
        /* 居中 */
        justify-content: center;
    }
    .fruit{
        width: 200px;
        text-align: center;
    }
    .footer{
        text-align: center;
        
    }
</style>
</head>

<body>
    <h5 align="center">购物车</h5>
    
    <div class="fruit-list">
        <div class="fruit">
            <div>
            <img src="img1.jpg" width="150px" height="190px" alt="">
             <div>橘子 ￥3</div>
             <div>
                              <!-- 传参时在参数前面加上'.' -->
                <button onclick="addNumber('.fruit1-num',3)">+</button>
                <span class="fruit1-num">0</span>
                <button onclick="removeNumber('.fruit1-num',3)">-</button>
             </div>
            </div>
        </div>

        <div class="fruit">
            <img src="img2.jpg" width="150px" height="190px" alt="">
            <div>车厘子 ￥138</div>
            <div>
                <button onclick="addNumber('.fruit2-num',128)">+</button>
                <span class="fruit2-num">0</span>
                <button onclick="removeNumber('.fruit2-num',128)">-</button>
             </div>
        </div>

        <div class="fruit">
            <img src="img3.jpg" width="150px" height="190px" alt="">
            <div>草莓 ￥28</div>
            <div>
                <button onclick="addNumber('.fruit3-num',28)">+</button>
                <span class="fruit3-num">0</span>
                <button onclick="removeNumber('.fruit3-num',28)">-</button>
             </div>
        </div>

        <div class="fruit">
            <img src="img4.jpg" width="150px" height="190px" alt="">
            <div>菠萝 ￥8</div>
            <div>
                <button onclick="addNumber('.fruit4-num',8)">+</button>
                <span class="fruit4-num">0</span>
                <button onclick="removeNumber('.fruit4-num',8)">-</button>
             </div>
        </div>
    </div>

    <div class="footer">
        总价：￥<span class="total-price">0</span>
    </div>

    <script>
        function addNumber(fruitclass,price){
            // 获取水果价格标签
            let fruitNum=document.querySelector(fruitclass).innerHTML;
            fruitNum++;
            document.querySelector(fruitclass).innerHTML=fruitNum;
            // 获取总价标签                       
            let totalPrice=document.querySelector(".total-price").innerHTML;
            document.querySelector(".total-price").innerHTML=totalPrice*1+price*1;
        }
        function removeNumber(fruitclass,price){
            // 获取水果价格标签
            let fruitNum=document.querySelector(fruitclass).innerHTML;
            fruitNum--;
            // 如果水果数量标签小于0,则为0
            if(fruitNum<0){
                document.querySelector(fruitNum).innerHTML=0;
            }else{
                document.querySelector(fruitclass).innerHTML=fruitNum;
            // 获取总价标签
            let totalprice=document.querySelector(".total-price").innerHTML;
            document.querySelector(".total-price").innerHTML=totalprice*1-price*1;
            }
            
        }
    </script>
</body>
</html>

m0_63448468
关注
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 7189
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
js实现购物车商品数量加减
10-14
主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现仿购物车加减效果
weixin_34005042的博客
03-16 361
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-...
Vue.js实现购物车功能简单拓展（商品数量的变化、总价的变化）
m0_56426418的博客
03-23 1454
实现购物车功能简单拓展（商品数量的变化、总价的变化）
AngularJs 入门购物车
Gorky_19的博客
10-22 307
下面代码是制作了一个简易的购物车，希望可以帮到大家！ 我的购物车 * { margin: 0; padding: 0; } /*table {*/ /*border-collapse: collapse;*/
js实现购物车数量的自增与自减
weixin_34352005的博客
11-14 232
素材： <script type="text/JavaScript"> function qtyUpdate(kind){ var f = document.form1; var c = f.qty.value; if(kind == "up"){ c++; }else if(kin...
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
vue实现商品列表添加购物车，编辑购物车功能
03-18
在Vue.js框架中实现商品列表添加到购物车以及编辑购物车功能是前端开发中的常见应用场景。Vue.js是一款轻量级的、基于组件的JavaScript库，它使得构建用户界面变得更为简洁和高效。在这个项目中，我们将探讨如何利用...
Vuejs实现购物车功能
10-19
购物车功能是电商网站中必不可少的一部分，实现购物车功能不仅可以加深对Vue.js的理解，还可以掌握前端状态管理、数据绑定和事件处理等核心概念。 #### Vue.js基础知识回顾 在实现购物车功能之前，需要熟悉Vue.js...
Vue.js实现开发购物车功能的方法详解
10-17
而在实现数量增减功能时，则需要直接修改对应商品对象中的数量字段。这两个操作都会影响总价的计算。 对于样式（style.css）的处理，虽然文中没有具体提及，但是良好的样式设计对于提升用户体验至关重要。在实际...
javascript实现简易购物车(高手勿喷)
04-21
用Javascript写的一个简易购物车，主要是对表格的操作。新手。。高手勿喷。。换个积分不容易啊。
jQuery实现购物车数字加减效果
06-25
经常会写到购物车这块，而购物车很多就有加减这个效果（可以将HTML代码复制多个，同时支持），小小的总结了一下
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 646
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
js - 简单的购物车增减操作
DebraJohn
07-31 2842
来做一个简陋的购物车吧。 功能呢，就是可以通过加减按钮来操作数量，同时商品的合计和下面的总计都会动态地发生变化，实现一个增减和计算的例子。 首先我们简单地写一下html： &lt;body&gt; &lt;ul id="shopLi"&gt;&lt;/ul&gt; &lt;!-- 用来存放渲染出来的购物车列表 --&gt; &lt;p class="addAll"&amp
js实现简易购物车功能
huhuhuja
10-12 949
<!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>26购物车结算&l.
纯原生 js 实现 简易 购物车
bangeshengtang的博客
08-11 1024
代码 纯原生 js 实现 简易 购物车。
使用js实现简单购物车功能
m0_72919073的博客
08-30 204
功能和效果图html代码css代码js代码。
js使用面向对象实现简易购物车
weixin_50044974的博客
04-15 911
1.效果 1.初始状态 2.添加数量和删除数据 3.向购物车中添加新的商品 2.html文件 1.购物车 <table> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值