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

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量861 收藏 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
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯原生 js 实现 简易 购物车
bangeshengtang的博客
08-11 972
代码 纯原生 js 实现 简易 购物车。
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 6419
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 383
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
用js实现购物车功能（函数封装）
Pray_for_wind的博客
08-22 121
点击每一个商品状态以后，相应的改变全选状态（数量和总价也相应的改变）点击全选按钮，改变所有购物车商品的选中状态。
使用js实现简单购物车功能
m0_72919073的博客
08-30 184
功能和效果图html代码css代码js代码。
JS实现简单的购物车
dxn16638400024的博客
06-30 3395
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8181
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
Javascript实现页面商品个数增减功能
哈
05-20 2040
效果 后台返回代码 Map<GoodsVO, Integer> cart = new HashMap(); cart.put(new GoodsVO(1001,"苹果",100),5); cart.put(new GoodsVO(1002,"桔子",300),3); cart.put(new GoodsVO(1003,"香蕉",150),3); request.getSession().setAttribute("cat",cart); 前端页面 <c:forEach items="$
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
vue实现商品列表添加购物车，编辑购物车功能
03-18
在Vue.js框架中实现商品列表添加到购物车以及编辑购物车功能是前端开发中的常见应用场景。Vue.js是一款轻量级的、基于组件的JavaScript库，它使得构建用户界面变得更为简洁和高效。在这个项目中，我们将探讨如何利用...
Vuejs实现购物车功能
11-28
在本教程中，我们将探讨如何使用Vue.js框架来实现一个基本的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了强大的数据绑定和指令系统，使得构建动态用户界面变得简单。 首先，我们要实现的功能包括：...
js实现仿购物车加减效果
10-20
本文主要介绍了js实现仿购物车+ -效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
原生js实现小米官网购物车功能
03-18
这个功能包括商品的添加、删除、数量增减以及总价的实时计算。下面将详细介绍这些核心知识点。 首先，我们需要创建HTML结构来展示商品列表和购物车。每个商品项应该包含商品名称、价格和一个“加入购物车”的按钮。...
Vue + Element UI｜可随商品单价和数量实时更新总价的表格
weixin_44589540的博客
11-12 5129
引入Element UI可参考文章 如何在Vue项目引入Element UI Element UI官网 效果 编辑表格中的单价和采购数量，总金额、商品总价、合计金额可以同步变化。点击测试按钮在控制台打印表格数据源tableData也同步更新。 源代码 <template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 7202
JavaScript 购物车
使用vue.js制作简易购物车
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-16 1189
通过单击+或者-来实现商品数量的增加和减少，单击移除会删除对应商品，删除所有商品则提示购物车为空的字样
JavaScript，水果购物车，JavaScript实现html页面增加，删除，修改单价
zzysdfsdfa的博客
04-14 2085
尚硅谷的2022javaweb教程，Html+css+JavaScript做一个水果小票购物车，完成添加，删除，修改单价操作。
javascript实现简单购物车功能（有图）
热门推荐
Of_the的博客
08-09 3万+
Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&
js实现简易购物车功能
qq_46038677的博客
07-28 999
一.整体效果图 （关灯下） （开灯下） 二.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <link type="text/css" rel="stylesheet" href="购物车样式.css"> <script src="购物车功.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值