简易购物车 + 本地存储

最新推荐文章于 2023-04-18 20:36:17 发布

淑兰

最新推荐文章于 2023-04-18 20:36:17 发布

阅读量1.3k

点赞数

分类专栏： js的小项目文章标签： js 简易购物车本地存储

本文链接：https://blog.csdn.net/weixin_42370431/article/details/98177228

版权

本文介绍如何利用JavaScript实现一个简易购物车功能，包括选中商品高亮显示、点击添加到购物车、判断并更新购物车中的商品数量、总价计算以及结合本地存储持久化数据。

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

思路：
1，获取信息
2，给四个商品加红边框，方便选择时能清楚的看到你选择的时那个商品
3，给添加购物车添加点击事件
5，判断数组里有没有内容，没有就push，有就判断新添加的数据id 和原来的是否相同，如果相同则让其数量++，否则渲染新的数据
4，渲染内容
6，总价
7，结合本地存储

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box {
			width: 1000px;
			height: 230px;
			display: flex;
			/*border: solid 1px;*/
		}
		
		img {
			width: 150px;
			height: 150px;
			vertical-align: middle;
		}
		
		table {
			width: 800px;
			border: solid 0.5px #ccc;
			border-spacing: 0;
			margin-top: 10px;
		}
		
		table tr td {
			border: solid 1px #ccc;
		}
		
		#th,
		#tb,
		#tf {
			display: none;
		}
	</style>
</head>

<body>
	<div id="box">

		<figure data-id='1'>
			<img src="img/f8a3f436d183aef2.png" />
			<figcaption>
				<b>亲爱的，热爱的 ¥</b>
				<span> 200</span>
			</figcaption>
			<button type="button" class="add">加入购物车</button>
		</figure>
		<figure data-id='2'>
			<img src="img/3f9e4548bc6fe19d.jpg" />
			<figcaption>
				<b>大宋少年志 ¥</b>
				<span> 19.9