如何用原生JS写一个简单购物车？来这篇文章告诉你。

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

天玄TX

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

阅读量479

点赞数 1

分类专栏： JS 文章标签： javascript tensorflow 开发语言

本文链接：https://blog.csdn.net/TianXuab/article/details/131448686

版权

JS 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

首先声明这仅仅只是个人理解而已，有什么错误或者缺少大家尽管在评论区发出来，共同学习，一起进步。

首先呢？我们要创建一个HTML基础代码。

基础HTML代码模板如下：他是比较关键的，是我们接下来了解的属性相关，可以直接复制拿来用的哈，它的意义就是搭载接下来的属性。

HTML:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>

		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>名称</th>
				<th>价格</th>
				<th>打折</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
			<tbody id="ProductInfo">

			</tbody>

			<div class="wrap clearfix">
				<tfoot>
					<tr>
						<td></td>
						<td id="FooterSum">总价：￥<span id="prices">0</span></td>
						<td></td>
						<td>总数量：<span id="nums">0</span></td>
						<td></td>
					</tr>
				</tfoot>

				<div>
					<button id="product">添加商品</button>
					<div id="shopbox">
						<button id="pushbut">添加</button>
						<button id="cancel">取消</button>
						<input type="text" id="shoptext" placeholder="请输入商品名称">
						<input type="number" id="shopprice" placeholder="请输入商品价格">
						<input type="number" id="rebate" placeholder="请输入商品折扣">
						<input type="number" id="shopnum" placeholder="请输入商品数量">
					</div>
				</div>
	</body>
</html>

CSS：

* {
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

.wrap {
	width: 1180px;
	margin: 0 auto;
}

td,
tr {
	border: 1px solid black;
}

table{
	margin-left: 11.5%;
}

th,
td {
	width: 235px;
	height: 50px;
	text-align: center;
}

span {
	padding: 0px 10px;
}

.cut,
.add,
.collect,
.delete {
	padding: 5px;
	margin: 7px;
}

#product {
	padding: 10px;
	margin-left: 11.5%;
}

#pushbut�cancel {
	padding: 5px;
}

#shopbox {
	display: none;
}

#shopbox{
	margin-left: 11.5%;
}

接下来就是最重要的JS部分：

我们先创建一个数组，我们在这个数组上进行操作

let Data = [{
							num: 0,
							price: 5000,
							discount: 85,
							name: '鸭梨X',
							id: 1,
						},
						{
							num: 0,
							price: 100,
							discount: 75,
							name: 'GB003',
							id: 2,
						},
						{
							num: 0,
							price: 20,
							discount: 50,
							name: '六神花露水',
							id: 3,
						}
					]

获取到DOM进行渲染操作

let ProductInfo = document.querySelector('#ProductInfo');
					let prices = document.querySelector('#prices');
					let nums = document.querySelector('#nums');
					let addition = document.querySelector('#product');
					let shopbox = document.querySelector('#shopbox');


					function func(arr) {
						ProductInfo.innerHTML = '';
						let Str = ''
						for (let i = 0; i < arr.length; i++) {
							Str += '<tr class="RowList"><td class="shopnamenow">' + arr[i].name + '</td>' +
								'<td>￥<span class="shopPriceNow">' + arr[i].price + '</span></td>' + '<td>' + Data[i].discount +
								'%</td>' +
								'<td class="bcc"><button class="cut" onclick="sub(' + i + ')">-</button><strong class="shopNumNow">' +
								Data[i].num + '</strong><button class="add" onclick="Add(' + i + ')">+</button></td>' +
								'<td><button class="collect">编辑</button><button class="delete" onclick="dele(' + i +
								')">删除</button></td></tr>'
						}
						ProductInfo.innerHTML = Str;
					}
					func(Data);

效果图如下：数量操作部分：

let pushbut = document.querySelector('#pushbut')
					let cancel = document.querySelector('#cancel')
					var del = document.querySelectorAll('.del');

					// 增加计算
					function Add(i) {
						let RowNum = document.querySelector('#ProductInfo');
						let shopNum = RowNum.getElementsByTagName('strong');
						Data[i].num++;
						shopNum[i].innerHTML = Data[i].num;
						amount++;
						nums.innerHTML = amount;
						totalPrices += Data[i].price;
						prices.innerHTML = totalPrices
					}

					// 减少计算
					function sub(i) {
						if (Data[i].num > 0) {
							Data[i].num--;
							totalPrices -= Data[i].price;
							amount--;
							prices.innerHTML = totalPrices;
							nums.innerHTML = amount;
						}
						let RowNum = document.querySelector('#ProductInfo');
						let shopNum = RowNum.getElementsByTagName('strong');
						shopNum[i].innerHTML = Data[i].num;
					}

删除和添加商品：

// 删除操作
					function dele(i) {

						if (Data[i].num > 0) {
							totalPrices -= (Data[i].price * Data[i].num);
							amount -= Data[i].num;
							prices.innerHTML = totalPrices;
							nums.innerHTML = amount;
						}
						Data.splice(i, 1)
						func(Data);
					}
					
					// 添加数据
					let totalPrices = 0;
					let amount = 0;
					
					addition.onclick = function() {
						shopbox.style.display = 'block';
						addition.style.display = 'none';
					}
					cancel.onclick = function() {
						shopbox.style.display = 'none';
						addition.style.display = 'block';
					}
					let nullShop = NaN;
					pushbut.onclick = function() {
						let shopnum = document.querySelector('#shopnum').value;
						let shopprice = document.querySelector('#shopprice').value;
						let shoptext = document.querySelector('#shoptext').value;
						let rebate = document.querySelector('#rebate').value;
						if (shopnum != '' || shopprice != '' || rebate != '' || shoptext != '') {
							Data.push({
								num: parseInt(shopnum),
								discount: parseInt(rebate),
								price: parseInt(shopprice),
								name: shoptext,
							})
							amount = parseFloat(amount) + parseFloat(shopnum);
							nums.innerHTML = amount;
							totalPrices += parseFloat(shopnum) * parseFloat(shopprice);
							prices.innerHTML = totalPrices;
							func(Data)
						} else {
							alert(' * 未添加商品信息 * ');
						}
					}

不多说我们直接看效果：

天玄TX

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
如何用原生JS写一个简单购物车？来这篇文章告诉你。

基础HTML代码模板如下：他是比较关键的，是我们接下来了解的属性相关，可以直接复制拿来用的哈，它的意义就是搭载接下来的属性。我们先创建一个数组，我们在这个数组上进行操作。获取到DOM进行渲染操作。
复制链接

扫一扫