JavaScript.购物车

已于 2022-03-12 17:09:10 修改
阅读量1.4k 收藏 1
点赞数 9
分类专栏： JS 文章标签： javascript 前端 开发语言
于 2022-03-12 17:06:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yifei_345678/article/details/123446482
版权

今天小阿飞来给大家分享一个简单的购物车案例

直接上代码叭：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算每一行总价的功能</title>
	</head>
	<body>
		<table border>
			<tr>
				<td>全选<input type="checkbox"/></td>
				<td>名称</td>
				<td>单价</td>
				<td>个数</td>
				<td>总价</td>
				<td>操作</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>🍍🍍🍍</td>
				<!--可以通过class类名拿元素-->
				<td class="price">9.9</td>
				<!-- contenteditable是否能修改表格内容 -->
				<td contenteditable="true" class="count">2</td>
				<td class="sum">9.9</td>
				<td>
					<button type="button">+</button>
					<button type="button">-</button>
					<button type="button">删除</button>
					</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>🍈🍈🍈</td>
				<!--可以通过class类名拿元素-->
				<td class="price">10.99</td>
				<!-- contenteditable是否能修改表格内容 -->
				<td contenteditable="true" class="count">1</td>
				<td class="sum">9.9</td>
				<td>
					<button type="button">+</button>
					<button type="button">-</button>
					<button type="button">删除</button>
					</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>🍓🍓🍓</td>
				<!--可以通过class类名拿元素-->
				<td class="price">19.9</td>
				<!-- contenteditable是否能修改表格内容 -->
				<td contenteditable="true" class="count">2</td>
				<td class="sum">9.9</td>
				<td>
					<button type="button">+</button>
					<button type="button">-</button>
					<button type="button">删除</button>
					</td>
			</tr>
		</table>
		<script type="text/javascript">
		  // 计算表格每一行中的总价并赋值给这一行的总价列的函数
		  function calc(tr){//调用时要传入tr
			  // 通过tr拿到price,count
			  // Elements带s的方法都是返回一个集合，尽管只有一列叫price
			  //取这个集合的第一个的值(但是只有input和下拉框select才可以用.value来获取值)
			  // 其他的标签可以用.textContent来得到值或者修改值
			  var price=tr.getElementsByClassName('price')[0].textContent
			  var count=tr.getElementsByClassName('count')[0].textContent
			  //算出总价并赋值给sum
			  tr.getElementsByClassName('sum')[0].textContent=(price*count).toFixed(2)
		  }
		 //窗口(window)的加载事件  会在整个页面加载完成(打开)之后执行
			window.onload=()=>{
				// 窗口加载完成后要做的:
				// 1.计算每一行的总价
				// 获得页面中所有的行
				var trs=document.getElementsByTagName('tr')
				//a.使用foreach
				// for(let tr in trs){//用in遍历下标
				// 	// 下标并不一定是数字类型所以最好不要用(!tr)来判断
				// 	if(tr==0)continue//下标0代表第一行
				// 	// 将除了第一行外的都传入
				// 	calc(trs[tr])
				// }
				// b.使用for循环
				for(let i=1;i<trs.length;i++){
					calc(trs[i])//让有商品的行的价格都计算显示
				}
			}
		</script>
	</body>
</html>

 简单的展示一下运行效果叭：

 

就写到这叭^_^ 

小阿飞_
关注
  • 9
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之购物车
m0_67331668的博客
03-12 2593
今日带来的是关于JavaScript的一个简单的界面版，但是有部分功能还存在着bug需要进一步的完善，请大家谅解，如果有解决方法也可以给我留言哦 一.登录 先看效果图吧 这就是登录界面，登录界面的所有输入都是用了正则判断，点击登录的时候会提示哪里错误，只有完全输入正确才可以进行登录。点击清除会把输入的东西全部清空。输入框也设置了特效，效果图如下 代码如下： <!DOCTYPE html> <html> <head> <meta chars.
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 7330
JavaScript购物车的实现
js实现购物车
m0_73481765的博客
06-30 3879
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
JavaScript实战之购物车案例
mirror_Mx的博客
12-25 1770
这个是通过网上视频案例学习，然后，自己想整理一下页面书写流程文档。 show样式： HTML代码结构+CSS结构 初始化css样式： * { margin: 0; padding: 0; } a { color: #666; text-decoration: none; } body { padding: 20px; } 此页面主要...
JavaScript购物车
m0_75007006的博客
12-17 132
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <style> .cart { width: 700px; padding: 0 10px 10px; bo
JavaScript购物车.zip
08-11
项目介绍：https://blog.csdn.net/weixin_40805686/article/details/99221539 在线演示地址：http://www.weichufeng.cn/csdn/shopCar/shopCar.html
javascript简易购物车
10-14
JavaScript简易购物车是一种常见的Web应用功能，用于模拟真实世界中的购物体验。在Web开发中，JavaScript扮演着关键角色，因为它负责处理用户交互、动态更新页面内容以及与服务器进行异步通信。在这个项目中，我们将...
JavaScript实现购物车功能
04-11
在JavaScript实现购物车功能的过程中...以上就是实现JavaScript购物车功能所涉及的主要技术点。在实际项目中，还会考虑性能优化、异常处理、响应式设计以及与其他前后端接口的交互等多个方面，以提供更完善的用户体验。
基于JavaScript实现购物车功能
10-20
在JavaScript实现购物车功能时，我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明： 1. **前端交互**：在本例中，用户通过点击“我的购物车”按钮（`#btAdd`）来...
Javascript实现购物车功能的详细代码
12-09
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。 请看主页效果图： 现在读者已
javascript实现购物车
05-31
在JavaScript实现购物车功能的过程中，我们通常会遇到多个关键知识点，包括数据存储、商品操作、数量管理、总价计算以及用户交互。以下是对这些知识点的详细解释： 1. **数据存储**：购物车中的商品信息需要被持久...
Javascript实现购物车案例--Javascript学习
你若成风，我则化雨
06-10 4531
JavaScript实现购物车来进行设计一个购物车的功能 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" hre...
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2206
JavaScript购物车。
Javascript07购物车案例
m0_63772104的博客
03-12 1909
今天给大家分享用JS模拟购物车的案例 废话就不多说了，直接上代码 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border=""> <tr> <td>全选<input typ
JavaScript实现购物车
cathei的博客
07-18 8485
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         .wrap{       
JavaScript实现购物车的功能
Mind_programmonkey的博客
04-04 3642
基本功能：加入购物车的功能、增加（减少）数量、删除、总计等功能页面源码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;购物车&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&a
javascript实现简单购物车功能（有图）
weixin_43144288的博客
08-29 1664
javascript实现简单购物车功能（有图） 本文链接：https://blog.csdn.net/qq_41140741/article/details/81543105 Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 <!DOCTYPE html> <html> <head&gt...
JavaScript实现小米购物车功能案例
weixin_50821119的博客
01-19 6747
需求 点击全选按钮，按钮全部被选中，结算价格发生变化 ，选中数量变化，取消全选，按钮全部取消选中，结算价格发生变化 ，选中数量变化。 点击单选按钮，按钮选中状态，结算价格发生变化 ，选中数量变化，取消按钮，结算价格发生变化 ，选中数量变化。 点击加号，小计变化，总数量变化。 点击减号，小计变化，总数量变化。 点击加入购物车新增一件商品， 效果图如下 代码如下 HTML代码 <!DOCTYPE html> <html lang="en"> <h...
javascript购物车代码
最新发布
06-28
JavaScript购物车功能通常是一个常见的前端应用示例，它允许用户添加、删除商品和计算总价。以下是一个简单的JavaScript购物车代码片段的概述： ```javascript // 假设我们有一个产品数组和一个购物车对象 const products = [{ id: 1, name: 'Product A', price: 10 }, { id: 2, name: 'Product B', price: 20 }]; let ShoppingCart = { items: [], // 添加商品到购物车 addItem(product) { this.items.push(product); }, // 删除商品 removeItem(productId) { this.items = this.items.filter(item => item.id !== productId); }, // 计算购物车总价 calculateTotal() { return this.items.reduce((total, item) => total + item.price, 0); }, // 清空购物车 clearCart() { this.items = []; } }; // 使用示例 const product = products; ShoppingCart.addItem(product); // 添加产品 console.log(ShoppingCart.calculateTotal()); // 输出总价 ShoppingCart.removeItem(product.id); // 删除产品

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值