JS购物车案例

最新推荐文章于 2024-11-05 15:26:40 发布
芜湖芜湖
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量126
点赞数
文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/tonysxiaobao/article/details/126693260
版权
<!DOCTYPE html>
<html>

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

		li {
			list-style: none;
		}

		body {
			background: #ccc;
		}

		a {
			text-decoration: none;
		}

		.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;
		}

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

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

		.cart .tr {
			height: 35px;
			text-align: center;
		}

		.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;
		}

		#delall {
			float: right;
			color: red;
		}

		#goods>.tr>div:nth-of-type(4)>a {
			color: black;
		}

		#goods>.tr>div:nth-of-type(4)>input {
			text-align: center;
		}

		#goods>.tr>div:nth-of-type(5)>a {
			color: red;
		}
	</style>
</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>
	<script>
		var str = "你好,\"前端";
		class Cart {
			goodsNode = document.getElementById("goods");
			addcart = document.getElementById("addcart");
			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.addcart.addEventListener('click', function () {
	
					var title = document.getElementById("title").value;
					var price = document.getElementById("price").value;
					var titles = document.getElementById("title")
					var prices = document.getElementById("price")
					if(titles.value != '' && prices.value != ''){
						_this.addgoods({ title: title, price: price });
					}

					
					titles.value = '';
					prices.value = '';
				})
				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);
						_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) {
				obj.id = new Date().getTime() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random());
				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;
				}

			}

		}

		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;
		}
		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;
					}
				}
			}
		}
		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(){
			this.countNode.innerText = this.goods.length;
			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();	
	</script>
</body>

</html>