JS基础总结————购物车（含注释，成果图）

最新推荐文章于 2023-07-08 13:27:44 发布

枫玄雾隐

最新推荐文章于 2023-07-08 13:27:44 发布

阅读量785

点赞数 60

文章标签： javascript 前端 html css3 正则表达式

本文链接：https://blog.csdn.net/m0_45293340/article/details/126691898

版权

利用面向对象写的购物车，本地存储，添加删除，功能都能实现

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			text-decoration: none;
		}

		body {
			background: #EA4335;
		}

		.main {
			width: 800px;
			margin: auto;
			margin-top: 20px;
		}

		.top {
			background: #fff;
			padding: 10px;
		}

		.ipt {
			width: 230px;
			height: 32px;
			line-height: 32px;
			border: 1px solid #ccc;
			outline: none;
		}

		.btn {
			height: 34px;
			width: 120px;
			border: none;
		}

		.cart {
			background: #fff;
			margin-top: 20px;
			padding: 10px;
		}

		.cart .tr {
			height: 35px;
		}

		.cart .tr div {
			float: left;
			line-height: 35px;
		}

		.cart .tr {
			padding: 5px 0px;
			border-bottom: 1px solid #ccc;
		}

		.cart .tr {
			clear: both;
		}

		.cart .tr div:nth-child(1) {
			width: 20%;
		}

		.cart .tr div:nth-child(2) {
			width: 20%;
		}

		.cart .tr div:nth-child(3) {
			width: 20%;
		}

		.cart .tr div:nth-child(4) {
			width: 30%;
		}

		.cart .tr div:nth-child(5) {
			width: 10%;
		}

		.cart .tr input {
			width: 50px;
		}

		.footer {
			background: #fff;
			margin-top: 20px;
			padding: 10px;
		}

		#amount {
			color: red;
		}
	</style>
	<script type="text/javascript">
		window.addEventListener('load', function () {

			class Cart {
				goods = [
					// {
					// 	id: 1,
					// 	title: '手机',
					// 	price: 2000,
					// 	num: 1,
					// 	checked: false
					// },
					// {
					// 	id: 2,
					// 	title: '平板',
					// 	price: 2000,
					// 	num: 1,
					// 	checked: false
					// },
					// {
					// 	id: 3,
					// 	title: '电脑',
					// 	price: 2000,
					// 	num: 1,
					// 	checked: false
					// },
					// {
					// 	id: 4,
					// 	title: '手表',
					// 	price: 2000,
					// 	num: 1,
					// 	checked: false
					// }
				];

				goodsNode = document.getElementById('goods'); //商品列表dom
				addCart = document.getElementById('addCart'); //添加事件中的按钮dom
				selectAll = document.getElementById('selectAll'); //全选
				countNode = document.getElementById('count') //获取商品数量
				amountNode = document.getElementById('amount') //获取商品价格
				delall = document.getElementById('delall'); //清空购物车



				constructor() {
					if (localStorage.getItem("goods")) {
						this.goods = JSON.parse(localStorage.getItem("goods"));
					}
					this.render();
					this.addEvent();
				}

				//绑定监听事件
				addEvent() {

					var _this = this; //this交出去给里面的事件函数用

					this.addCart.addEventListener('click', function () {
						var title = document.getElementById('title').value;
						var price = document.getElementById('price').value;
						_this.addGoods({
							title: title,
							price: price
						}); //传操作的对操作的方法里
						_this.iptClear();
					});

					//注册删除事件
					this.goodsNode.addEventListener('click', function (e) {
						if (e.target.name == "del") {
							var id = e.target.parentNode.parentNode.id;
							_this.delGoods(id);
						}

						//单击选中事件
						if (e.target.name == "ckboxs") {
							var id = e.target.parentNode.parentNode.id;
							_this.upDateGoods(id, 'checked', e.target.checked); //更改当前id的checked状态
							_this.isSelectAll(); //更改全选按钮的状态
						}

						//+的事件
						if (e.target.name == "+" || e.target.name == "-") {
							var id = e.target.parentNode.parentNode.id;
							_this.ChangeNum(e.target.name, id);
						}
					});

					//全选所有的复选框
					this.selectAll.addEventListener('click', function () {
						_this.selectAllGoods(this.checked);
					})
					this.delall.addEventListener("click", function () {
						_this.goods = [];
						//重新渲染数据到页面上
						_this.render();
					})
				}

				//添加数据
				addGoods(obj) {

					//判断输入框是否为空，若为空不加数据
					if (!(title.value == "" || price.value == "")) {
						//随机一个id
						obj.id = new Date().getTime() + Math.floor(Math.random() * 10).toString();
						obj.num = 1;
						obj.checked = false; //默认不选中
						this.goods.push(obj);
						//重新渲染数据到页面上
						this.render();
					}
				}

				//删除数据
				delGoods(id) {

					//删除事件
					for (var i = 0; i < this.goods.length; i++) {
						if (this.goods[i].id == id) { //找到此元素删除
							this.goods.splice(i, 1);
						}
					}
					//重新渲染数据到页面上
					this.render();
				}

				//更新数据
				upDateGoods(id, k, v) {
					for (var i = 0; i < this.goods.length; i++) {
						if (this.goods[i].id == id) { //找到此元素修改
							this.goods[i][k] = v;
						}
					}
					//重新渲染数据到页面上
					this.render();
				}

				//全选按钮
				selectAllGoods(checked) {
					for (var i = 0; i < this.goods.length; i++) {
						this.goods[i].checked = checked;
					}
					//重新渲染数据到页面上
					this.render();
				}
				//是否全选
				isSelectAll() {
					//控制全选按钮的状态
					var flag = true;
					for (var i = 0; i < this.goods.length; i++) {
						if (this.goods[i].checked == false) {
							flag = false;
						}
					}
					this.selectAll.checked = flag;
				}


				//改变num的数量
				ChangeNum(type, id) {
					for (var i = 0; i < this.goods.length; i++) {
						if (this.goods[i].id == id) {
							if (type == "+") {
								this.goods[i].num++;
							} else {
								this.goods[i].num--;
								this.goods[i].num = this.goods[i].num > 0 ? this.goods[i].num : 1;
							}
						}
					}
					//重新渲染数据到页面上
					this.render();
				}


				//点击加入购物车按钮清空输入框内容
				iptClear() {
					document.getElementById('title').value = "";
					document.getElementById('price').value = "";
				}




				//渲染数据到页面上
				render() {
					var str = '';

					for (var i = 0; i < this.goods.length; i++) {

						str = str + "<div class=\"tr\" id=\"" + this.goods[i].id + "\">"
						str = str + "<div><input type=\"checkbox\" name=\"ckboxs\" value=\"   " + this.goods[i].id +
							"  \" " + (this.goods[i].checked ? "checked" : "") + "></div>"
						str = str + "<div>" + this.goods[i].title + "</div>"
						str = str + "<div>" + this.goods[i].price + "元</div>"
						str = str +
							"<div><a href=\"javascript:;\" name=\"-\">-</a> <input type=\"text\" value=\"" + this
								.goods[i].num +
							"\" readonly=\"\"> <a href=\"javascript:;\" name=\"+\">+</a></div><div><a href=\"javascript:;\" name=\"del\">删除</a></div>"
						str = str + "</div>"
					}

					this.goodsNode.innerHTML = str;
					this.ChangeFooter();
					localStorage.setItem("goods", JSON.stringify(this.goods)); //本地存储
				}

				//更改商品的数量和价格
				ChangeFooter() {

					var sum = 0;
					for (var i = 0; i < this.goods.length; i++) {

						//如果选中则显示选中的个数，若不选中则为0
						if (this.goods[i].checked) {
							sum = sum + this.goods[i].num;
						} else {
							this.countNode.innerHTML = 0;
						}
						this.countNode.innerHTML = sum;
					}

					var amount = 0;
					for (var i = 0; i < this.goods.length; i++) {
						if (this.goods[i].checked) {
							amount = amount + this.goods[i].num * this.goods[i].price;
						}
					}
					this.amountNode.innerText = amount;

				}
			}
			var C1 = new Cart();
			// C1.render();
			// C1.addEvent();


		})
	</script>
</head>

<body>

	<div class="main">

		<div class="top">
			商品名称：<input type="text" name="" value="" id="title" class="ipt" />
			商品价格：<input type="text" name="" value="" id="price" class="ipt" />
			<input type="button" value="加入购物车" class="btn" id="addCart" />
		</div>
		<div class="cart">
			<div class="tr">
				<div><input type="checkbox" name="" value="" id="selectAll" /> 全选按钮</div>
				<div>商品名称</div>
				<div>商品价格</div>
				<div>数量</div>
				<div>操作</div>
			</div>
			<div id="goods"></div>
		</div>
		<div class="footer">
			选中<span id="count">0</span>件商品,共计 <span id="amount">0</span> 元
			<a href="javascript:;" class="r" id="delall">清空购物车</a>
		</div>
	</div>





</body>

</html>