前端2，购物车加减，计算总金额（js版本）

最新推荐文章于 2023-10-24 22:58:27 发布
最新推荐文章于 2023-10-24 22:58:27 发布
阅读量4.3k 收藏 8
点赞数 3
分类专栏： 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LN_VERSION/article/details/100729167
版权 
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>完善购物车页面</title>
        <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
    </head>
    
    <!--onload，在加载时计算好原始金额-->
    <body onload="total()">
    
    <div class="content">
        <div class="logo">
            <img src="images/dd_logo.jpg"><span onclick="javascript:if (confirm('确认要关闭吗'))window.close() ">关闭</span>
        </div>
        <div class="cartList">
            <ul>
                <li>¥<input type="text" name="price" value="21.90"></li>
                <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
                <li id="price0">¥21.90</li>
                <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
            </ul>
            <ul&
最低0.47元/天 解锁文章
木易离火
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端大额计算，真正解决js精度丢失问题，字节跳动go面试
m0_60635035的博客
04-16 257
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大
利用js中的DOM结点实现伪购物车添加物品和减少物品并计算出总价
qq_52477159的博客
08-29 1557
利用js中的DOM结点实现伪购物车添加物品和减少物品并计算出总价（实质上就是点击元素实现别的内容中的元素发生增删改的变化）
jQuery实现购物车多物品数量的加减+总价计算
10-25
主要介绍了jQuery实现购物车多物品数量的加减+总价计算,需要的朋友可以参考下
前端js 购物车加减号 小小demo(小白适合)
07-09
前端js 购物车加减号 小小demo(小白适合)
js 数组金额相加
weixin_43550766的博客
04-25 1304
用于数组循环相加（例如table） arr1.reduce((money, item) => money + Number(item.money), 0)
前端JS 购物车的加减数量、计算总价
热门推荐
简单的男孩
06-07 1万+
前端页面用JS技术对购物车页面添加功能 前端页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>完善当当购物车页面</title> <link type="text/css" rel="stylesheet" href="css/cartStyle.css" /> </head> <body
通过jquery实现购物车的全选加减以及计算总价
weixin_52153452的博客
12-15 1815
通过jquery实现购物车的全选加减以及计算总价
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少
m0_70932336的博客
04-03 3410
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。
JS计算购物车中商品总价
最新发布
weixin_62980497的博客
10-24 914
3.页面初始化的时候,单价有初始值,自动计算出商品的总金额,同时计算出所有商品的总金额;商品信息通过创建商品对象来实现，商品的加和通过创建数组，再通过遍历数组读取指定属性对价格进行计算。单价,总金额:input输入框输入的是只能是非负的浮点数或者整数切只能保留两位小数点。1. 当单价改变的时候,计算出这件商品的总金额,同时计算出所有商品的总金额;2.当单件商品的总金额改变时,计算出所有商品的总金额。
购物车加减计算.rar
08-07
jQuery购物车加减计算，初始化执行获取产品列表价格和产品数量的，求和函数方法，点击加号，减号触发 产品件数+执行求和方法。
Angular实现可删除并计算总金额的购物车功能示例
10-18
主要介绍了Angular实现可删除并计算总金额的购物车功能,涉及AngularJS事件响应、元素遍历与数值运算等相关操作技巧,需要的朋友可以参考下
js 实现 购物篮中常用的计算总价效果
03-30
js 实现 购物篮中常用的计算总价效果! 值得下载看看!资源免费,大家分享!!
jQuery商品数量加减并计算总价代码
06-10
jQuery商品数量加减并计算总价代码是一款类似商城增加减少商品件数特效，也可以在文本框直接输入数值，随着数量的改变计算出总价。
js实现购物车商品数量加减
10-14
主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序实现抛入购物车效果，计算金额，加减等功能
09-30
该小程序案例实现了购物车加减计算金额，单选全选计算金额，计算数量，删除，以及抛物线点击商品抛入购物车效果.
js实现仿购物车加减效果
10-20
本文主要介绍了js实现仿购物车+ -效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
Android 购物车加减功能的实现代码
08-19
主要介绍了Android 实现购物车加减功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
解决JS浮点数(小数)计算加减乘除的BUG
chunli5093的博客
06-17 207
/** **加法函数，用来得到精确的加法结果 **说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 **调用：accAdd(arg1,arg2) **返回值：arg1加上arg2的精确结果 **/ functio...
JavaScript实现购物车加减和价格运算等功能
云祁QI
10-13 4169
需求说明： 单击“半闭”按钮时，关闭当前页面购物车页面 单击“移入收藏”弹出收藏提示 单击“删除”弹出确认删除提示 单击“结算”按钮，弹出结算信息页面窗口 自动计算商品总计 单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品 效果图： 代码实现： <!DOCTYPE html> <html> <hea...
js购物车加减计算总价
10-08
你可以使用 JavaScript 来实现购物车加减计算总价的功能。首先，你需要为每个商品创建一个输入框用于输入数量，并为每个商品的加减按钮绑定事件，实现数量的增减。然后，在每次增减事件触发时，你可以更新对应商品的数量，并重新计算总价。 以下是一个简单的示例代码： HTML: ```html <div> <label>商品A：</label> <button onclick="decreaseQuantity('A')">-</button> <input type="text" id="quantityA" value="0"> <button onclick="increaseQuantity('A')">+</button> </div> <div> <label>商品B：</label> <button onclick="decreaseQuantity('B')">-</button> <input type="text" id="quantityB" value="0"> <button onclick="increaseQuantity('B')">+</button> </div> <p>总价：<span id="totalPrice">0</span></p> ``` JavaScript: ```javascript // 初始化商品数量和总价 var quantities = { A: 0, B: 0 }; var prices = { A: 10, B: 20 }; var total = 0; // 减少商品数量 function decreaseQuantity(product) { if (quantities[product] > 0) { quantities[product]--; updateTotal(); } } // 增加商品数量 function increaseQuantity(product) { quantities[product]++; updateTotal(); } // 更新总价 function updateTotal() { total = 0; for (var product in quantities) { total += quantities[product] * prices[product]; } document.getElementById('totalPrice').textContent = total; } ``` 在这个示例中，我们使用一个 `quantities` 对象来存储每个商品的数量，使用一个 `prices` 对象来存储每个商品的价格。通过点击按钮时调用相应的函数来增减数量，并在每次更新数量时重新计算总价，并更新页面显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值