html+js购物车的简单实现（点击事件，匿名函数）

最新推荐文章于 2023-03-29 19:16:14 发布
最新推荐文章于 2023-03-29 19:16:14 发布
阅读量679 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lr_wlr_w/article/details/103897734
版权

xiaoguotu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv</
最低0.47元/天 解锁文章
橘子泡水
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript购物车案例
weixin_67150631的博客
03-12 3927
JavaScript购物车案例
[JavaScript实训] -- 制作简易的购物车页面
热门推荐
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告；5、勾选或取消勾选商品总价会相应变化；6、总价默认计算被选中的商品，添加商品到购物车时默认被选中；7、可以进行全选和反选，并一键删除，库存返回清单，总价改变。
一个简单的购物车程序（html+js）
姜翰翰的博客
03-24 7156
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多选购物车</title> <style> .delete{ border: none; color: blue; background-color: white; width:...
购物车——js小项目实例
u013430418的博客
09-08 4712
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 7334
JavaScript购物车的实现
原生JavaScript实现购物车
01-12
在本项目中，"原生JavaScript实现购物车"是一个典型的前端开发示例，它展示了如何使用JavaScript语言来创建一个交互式的购物车系统。这个系统可能包括添加商品、修改商品数量、计算总价等基本功能。接下来，我们将...
jquery实现简单的购物车功能.zip
02-25
- **事件处理**：通过`.on()`方法绑定事件，如点击事件(`click`)，改变事件(`change`)等，并可以使用匿名函数或外部函数处理事件响应。 - **属性操作**：使用`.attr()`获取或设置元素的属性，例如修改商品的数量。...
特效购物车
01-12
例如，`$("#addToCartBtn").click(function() {...})`用于监听按钮点击，并在点击时执行匿名函数内的代码。 2. **AJAX（Asynchronous JavaScript and XML）**：AJAX是创建动态网页的关键技术，允许在不刷新整个页面...
cookiesjs让使用javascript超级简单得操作cookies在前端
08-11
标题"cookiesjs让使用javascript超级简单得操作cookies在前端"和描述"cookies.js - 让使用javascript超级简单得操作cookies在前端"都指向一个名为`cookies.js`的库，这是一个专为前端JavaScript开发设计的库，旨在...
jQuery实现删除li节点的方法
11-27
当用户点击某个`<li>`元素时，它会执行匿名函数内的代码： ```javascript $(this).toggleClass("hover"); ``` 这里的`$(this)`指的是触发事件的当前`<li>`元素。`toggleClass()`方法根据当前元素是否具有指定的...
JavaScript 案例 购物车
weixin_65257540的博客
03-29 1883
思路： 1、获取页面元素，本练习用的表格table实现 2、声明一个数组，包含自己需要渲染的内容，每个内容需要声明一个默认值，便于之后用来判断是否被勾选 3、封装渲染函数：通过遍历每一个元素，判断勾选状态，如果被勾选，就直接添加选中属性，没有则正常添加。 4、接着遍历元素的每一个键，并分别赋值给每一个td。 5、判断合计金额，每次遍历完成后，需要把被勾选的元素单价*数量并赋值给总价的元素。 6、最后直接渲染到页面。 7、页面的事件，...
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2213
JavaScript购物车。
前端学习——JavaScript原生实现购物车案例
m0_46084075的博客
03-30 4126
一. 购物车案例 1.1 案例介绍 今天我们来写另外一个购物车案例，说实话对于我来说这个是花了将近三个小时的时间然后才做出来的，里面可能还存在一些我没有发现的问题，但是能完成基本的功能，对于一些基本的需求都是可以完成的，下面照旧是案例实现的gif图片 根据上图我们可以看到，每个购物车的选项都是互不影响的，每个商店也都是互不影响的，单独运算，每个店的总计也是单独计算的，有一个计算复选框总价的功能，而且这是个通用的模板，不论有多少个店铺，店铺里面的商品有多少个，只要html的结构不变都是可以通用的，那么不多说
JS实现购物车功能
qq_46362763的博客
03-17 9438
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。
javaScript购物车案例
l18937842167的博客
10-12 1669
javaScript原生购物车代码案例
Javascript07购物车案例
m0_63772104的博客
03-12 1910
今天给大家分享用JS模拟购物车的案例 废话就不多说了，直接上代码 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border=""> <tr> <td>全选<input typ
matlab下载.pdf
最新发布
07-14
matlab下载下载方式及注意事项
HTML+css+JavaScript实现购物车功能代码
05-17
HTML: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="cart-list"> <tr> <td>商品1</td> <td>100</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>100</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品2</td> <td>200</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>200</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> <tr> <td>商品3</td> <td>300</td> <td><input type="number" min="1" value="1" onchange="changeQuantity(this)"></td> <td>300</td> <td><button onclick="removeItem(this)">删除</button></td> </tr> </tbody> <tfoot> <tr> <th colspan="3">合计：</th> <th id="total-price">600</th> <th><button onclick="clearCart()">清空购物车</button></th> </tr> </tfoot> </table> </body> <script src="script.js"></script> </html> ``` CSS: ```css table { border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #eee; } button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } input[type="number"] { width: 50px; text-align: center; } ``` JavaScript: ```javascript // 获取购物车商品列表 let cartList = document.getElementById('cart-list').rows; // 计算总价 function calcTotalPrice() { let totalPrice = 0; for (let i = 1; i < cartList.length - 1; i++) { let quantity = cartList[i].cells[2].children[0].value; let price = cartList[i].cells[1].innerHTML; let subtotal = quantity * price; cartList[i].cells[3].innerHTML = subtotal; totalPrice += subtotal; } document.getElementById('total-price').innerHTML = totalPrice; } // 改变商品数量 function changeQuantity(input) { if (input.value < 1) { input.value = 1; } calcTotalPrice(); } // 删除商品 function removeItem(button) { let row = button.parentNode.parentNode; row.parentNode.removeChild(row); calcTotalPrice(); } // 清空购物车 function clearCart() { for (let i = 1; i < cartList.length - 1; i++) { cartList[i].parentNode.removeChild(cartList[i]); } document.getElementById('total-price').innerHTML = 0; } ``` 这段代码实现了一个简单的购物车功能，可以添加商品、删除商品、修改数量，并且会实时计算总价。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值