JS实现购物车

最新推荐文章于 2024-05-28 18:30:26 发布

都说了我不是彭于晏

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量719

点赞数 3

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/qq_40513088/article/details/85235855

版权

本文介绍了使用JavaScript实现购物车的详细步骤，包括实现思路、代码逻辑和具体实现。通过在页面创建商品列表，利用JS获取元素并实现商品的添加与移除功能，同时计算购物车中商品的总价、数量及最贵商品的价格。

摘要由CSDN通过智能技术生成

JS实现购物车

1.实现思路：

（1）在body中定义一个id="list",将所有商品存放在一个列表中，当进入购物车时如果有两个商品被勾选了，需要计算出总共的价钱和商品的件数以及最贵的商品价格；

（2）在JS中获取元素属性，分别把它们存放在数组中；

（3）点击加号进行商品添加，点击减号进行商品移除；

（4）将上一步用两个点击函数来实现添加和移除；

（5）在JS中用for循环来计算总价钱和比较最贵的商品；

2.代码思路

1.商品列表：

<body>
		<ul id="list">
			<li>
				<input type="button" value="-" />
				<strong>0</strong>
				<input type="button" value="+" />
				单价:<em>10元</em>
				总计:<span>0元</span>
			</li>
			
			<li>
				<input type="button" value="-" />
				<strong>0</strong>
				<input type="button" value="+" />
				单价:<em>5元</em>
				总计:<span>0元</span>
			</li>
			
			<li>
				<input type="button" value="-" />
				<strong>0</strong>
				<input type="button" value="+" />
				单价:<em>6元</em>
				总计:<span>0元</span>
			</li>
			
			<li>
				<input type="button" value="-" />
				<strong>0</strong>
				<input type="button" value="+" />
				单价:<em>8元</em>
				总计:<span>0元</span>
			</li>
			
		</ul>
</body>

2.商

最低0.47元/天解锁文章

都说了我不是彭于晏

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现购物车

JS实现购物车1.实现思路：（1）在body中定义一个id="list",将所有商品存放在一个列表中，当进入购物车时如果有两个商品被勾选了，需要计算出总共的价钱和商品的件数以及最贵的商品价格；（2）在JS中获取元素属性，分别把它们存放在数组中；（3）点击加号进行商品添加，点击减号进行商品移除；（4）将上一步用两个点击函数来实现添加和移除；（5）在JS中用for循环来计算总价...
复制链接

扫一扫

专栏目录