js实现添加购物车功能

最新推荐文章于 2024-05-28 18:30:26 发布
原创最新推荐文章于 2024-05-28 18:30:26 发布
· 8.8k 阅读
34 ·
版权
文章标签：
#javascript
javascript 专栏收录该内容
76 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			table {
				position: absolute;
				left: 300px;
				top: 100px;
			}

			th {
				width: 150px;
				height: 50px;
				background: skyblue;
			}

			tr {
				width: 150px;
				height: 50px;
				text-align: center;
			}

			.left {
				width: 200px;
				height: 600px;
				float: left;
				margin-left: 10px;
				margin-top: 10px;
			}

			.right {
				width: 200px;
				height: 600px;
				float: right;
				margin-right: 10px;
				margin-top: 10px;
			}

			.pic {
				width: 100px;
			}

			.money {
				color: red;
			}

			button {
				width: 20px;
			}

			.buy-dish {
				width: 30px;
				text-align: center;
				color: white;
				display: inline-block;
				background: #FF0000;
				font-size: 20px;
				line-height: 20px;
				margin-left: 75px;
				cursor: pointer;
			}

			.buy-dish:hover {
				background: gray;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="0" id="tb">
			<tr>
				<th>商品名称</th>
				<th>数量</th>
				<th>单价</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>椒盐蘑菇</td>
				<td>
					<button type="button">-</button>
					<span class="goods-num">0</span>
					<button type="button">+</button>
				</td>
				<td>单价：<span class="goods-price">22</span></td>
				<td>小计：<span class="goods-subtota">0</span></td>
				<td>
					操作:<input type="button" name="" class="del" value="删除" />
				</td>
			</tr>
			<tr>
				<td>干锅包菜</td>
				<td>
					<button type="button">-</button>
					<span class="goods-num">0</span>
					<button type="button">+</button>
				</td>
				<td>单价：<span class="goods-price">18</span></td>
				<td>小计：<span class="goods-subtota">0</span></td>
				<td>
					操作:<input type="button" name="" class="del" value="删除" />
			</tr>
			<tr>
				<td>水煮肉片</td>
				<td>
					<button type="button">-</button>
					<span class="goods-num">0</span>
					<button type="button">+</button>
				</td>
				<td>单价：<span class="goods-price">34</span></td>
				<td>小计：<span class="goods-subtota">0</span></td>
				<td>
					操作:<input type="button" name="" class="del" value="删除" />
			</tr>
			<tr id="x">
				<td>重庆辣子鸡</td>
				<td>
					<button type="button">-</button>
					<span class="goods-num">0</span>
					<button type="button">+</button>
				</td>
				<td>单价：<span class="goods-price">48</span></td>
				<td>小计：<span class="goods-subtota">0</span></td>
				<td>
					操作:<input type="button" name="" class="del" value="删除" />
			</tr>
			<tr>
				<td colspan="5">商品总数：<span id="goods-total-num">0</span>件,总计<span id="goods-total-price">0</span>元</td>
			</tr>
			<div class="left">
				<img src="img/1.png" width="200" height="200"><span class="pic">
					<span class="dish-name">锅包肉</span>
					<span class="dish-money">25</span>
					<span class="buy-dish">+</span>
					<img src="img/2.png" width="200" height="200"><span class="pic">
						<span class="dish-name">糖醋里脊</span>
						<span class="dish-money">22</span>
						<span class="buy-dish">+</span>
			</div>
			<div class="right">
				<img src="img/3.png" width="200" height="200"><span class="pic">
					<span class="dish-name">鱼香肉丝</span></span>
				<span class="dish-money">24</span>
				<span class="buy-dish">+</span>
				<img src="img/4.png" width="200" height="200"><span class="pic">
					<span class="dish-name">红烧茄子</span>
					<span class="dish-money">21</span>
					<span class="buy-dish">+</span>
			</div>
		</table>
	</body>
</html>
<script type="text/javascript">
	class Cart {
		constructor() {

		}

		//商品总数

		getGoodsTotalNum() {
			let oGoodsNum = document.getElementsByClassName("goods-num");
			let goodsTotalNum = 0;
			for (let i = 0; i < oGoodsNum.length; i++) {
				goodsTotalNum += Number(oGoodsNum[i].innerHTML);
			}
			let oGoodsTotalNum = document.getElementById("goods-total-num");
			oGoodsTotalNum.innerHTML = goodsTotalNum;
		}

		//商品总价格

		getGoodsTotalPrice() {
			let oGoodsSubtota = document.getElementsByClassName("goods-subtota");
			let goodsTotalPrice = 0;
			for (let i = 0; i < oGoodsSubtota.length; i++) {
				goodsTotalPrice += Number(oGoodsSubtota[i].innerHTML);
			}
			let oGoodsTotalPrice = document.getElementById("goods-total-price");
			oGoodsTotalPrice.innerHTML = goodsTotalPrice;
		}

		//小计

		getGoodsSubtota(num, price) {
			return num * price;
		}

		//增加货物

		getGoodsAdd(btn) {
			let oGoodsNum = btn.previousElementSibling;
			oGoodsNum.innerHTML = (Number(oGoodsNum.innerHTML)) + 1;
			//单价
			let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
			//小计
			let goodsSubtota = this.getGoodsSubtota(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);
			//找到小计
			let oGoodSubtota = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
			//改变小计的值
			oGoodSubtota.innerHTML = goodsSubtota;
			this.Addcart()
			this.getGoodsTotalNum();
			this.getGoodsTotalPrice();
		}

		//减少货物

		getGoodsReduce(btn) {
			let oGoodsNum = btn.nextElementSibling;
			if (oGoodsNum.innerHTML > 0) {
				let oGoodsNum = btn.nextElementSibling;
				oGoodsNum.innerHTML = (Number(oGoodsNum.innerHTML)) - 1;
				//单价
				let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
				//小计
				let goodsSubtota = this.getGoodsSubtota(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);
				//找到小计
				let oGoodSubtota = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
				//改变小计的值
				oGoodSubtota.innerHTML = goodsSubtota;
			}
		}

		//删除货物

		goodsDel(btn) {
			let tr = btn.parentNode.parentNode;
			tr.remove();
			this.getGoodsTotalNum();
			this.getGoodsTotalPrice();
		}

		//添加事件
		eventBind() {
			let btn = document.getElementsByTagName("button");
			let that = this;
			let del = document.getElementsByClassName("del");
			for (let i = 0; i < btn.length; i++) {
				if (i % 2 == 0) {
					btn[i].onclick = function(evt) {
						that.getGoodsReduce(this);
					}
				} else {
					btn[i].onclick = function(evt) {
						that.getGoodsAdd(this);
					}
				}
			}
			for (let i = 0; i < del.length; i++) {
				del[i].onclick = function() {
					that.goodsDel(this);
				}
			}
		}
		//添加购物车
		Addcart(){
			let oBuyDish = document.getElementsByClassName("buy-dish");
			let oDishName = document.getElementsByClassName("dish-name");
			let oDishMoney = document.getElementsByClassName("dish-money");
			let that = this;
			for (let i = 0; i < oBuyDish.length; i++) {
				oBuyDish[i].onclick = function(evt) {
					let e = evt || event;
					let target = e.target || e.srcElement;
					let tb = document.getElementById("tb");
					if(target.className=="buy-dish"){
						let tr = tb.insertRow(1);
						tr.innerHTML = "<td>" + oDishName[i].innerText + "</td>" +
							"<td>" + "<button>" + "-" + "</button>" + "<span class='goods-num'>" + 0 + "</span>" + "<button>" + "+" +
							"</button>" + "</td>" +
							"<td>" + "单价：" + "<span class='goods-price'>" + oDishMoney[i].innerText + "</span>" + "</td>" +
							"<td>" + "小计：" + "<span class='goods-subtota'>" + 0 + "</span>" + "</td>" +
							"<td>" + "操作" + "<input type='button' name='' class='del'' value='删除' />" + "</td>";
					}
				}
			}
		}
	}
	let c = new Cart();
	c.Addcart();
</script>