day12

Question

day12

Wscats opened this issue 7 years ago · 0 comments

商品列表

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul class="goods">
			<li data-guid="g01">
				<p>短袖衬衣</p>
				<p class="price">98.88</p>
				<div class="add2cart">
					<button>添加到购物车</button>
				</div>
			</li>
			<li data-guid="g02">
				<p>短袖衬衣2</p>
				<p class="price">88.88</p>
				<div class="add2cart">
					<button>添加到购物车</button>
				</div>
			</li>
			<li data-guid="g03">
				<p>短袖衬衣3</p>
				<p class="price">9.98</p>
				<div class="add2cart">
					<button>添加到购物车</button>
				</div>
			</li>
			<li data-guid="g04">
				<p>短袖衬衣4</p>
				<p class="price">8.88</p>
				<div class="add2cart">
					<button>添加到购物车</button>
				</div>
			</li>
		</ul>
		<a href="结算.html">去结算</a>
		<script>
			var goods = document.querySelector(".goods");
			console.log(goods)
			var carlist = [];
			var cookie = document.cookie.split('; ');
			for(var i = 0; i < cookie.length; i++) {
				var arr = cookie[i].split('=');
				if(arr[0] === 'carlist') {
					// 在cookie中得到的数据都是字符串
					// 所以需要转换成数组/对象
					carlist = JSON.parse(arr[1]);
				}
				console.log(carlist)
			}
			goods.addEventListener("click", function(e) {
				console.log(e.target.nodeName.toLowerCase() === "button")
				if(e.target.nodeName.toLowerCase() === "button") {
					var li = e.target.parentNode.parentNode;
					var liId = li.getAttribute('data-guid');
					console.log(liId)
				}
				for(var i = 0; i < carlist.length; i++) {
					if(carlist[i].gid === liId) {
						carlist[i].num++;
						break;
					}
				}
				console.log(i)
				console.log(li.children[0].innerHTML)
				if(i === carlist.length) {
					// 创建一个对象，用于保存商品信息
					var obj = {};
					obj.gid = liId;
					obj.name = li.firstElementChild.innerHTML;
					obj.price = li.children[1].innerHTML;
					obj.num = 1;
					carlist.push(obj);
				}
				console.log(carlist);

				var now = new Date();
				now.setDate(now.getDate() + 3);
				document.cookie = ('carlist=' + JSON.stringify(carlist) + ';expires=' + now);
			})
		</script>
	</body>

</html>

购物车

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
		</ul>
		<button id="btnClear">清除购物车</button>
		<script>
			var carlist = [];
			var cookie = document.cookie.split('; ');
			for(var i = 0; i < cookie.length; i++) {
				var arr = cookie[i].split('=');
				if(arr[0] === 'carlist') {
					// 在cookie中得到的数据都是字符串
					// 所以需要转换成数组/对象
					carlist = JSON.parse(arr[1]);
				}
				console.log(carlist)
			}
			var ul = document.querySelector("ul")

			function render() {
				var str = carlist.map(function(item) {
					return "<li data-guid='" + item.gid + "'>" + item.name + "</li>"
				}).join("")
				console.log(str);
				ul.innerHTML = "";
				ul.innerHTML = str;
			}
			render();
			ul.addEventListener("click", function(e) {
				console.log(e.target.getAttribute("data-guid"))
				var liId = e.target.getAttribute("data-guid");
				//删除
				/*for(var i=0;i<carlist.length;i++){
					if(carlist[i].gid === liId){
						carlist.splice(i,1);
						render();
						var now = new Date();
						now.setDate(now.getDate() + 3);
						document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires='+now;
						break;
					}
				}*/
				//增加
				for(var i = 0; i < carlist.length; i++) {
					if(carlist[i].gid === liId) {
						carlist[i].num++;
						render();
						var now = new Date();
						now.setDate(now.getDate() + 3);
						document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires=' + now;
						break;
					}
				}
			})
			// 清空购物车
			// 删除carlist这个cookie
			// 利用设置过期时间达到删除的效果。
			var btnClear = document.querySelector("#btnClear");
			btnClear.onclick = function() {
				var now = new Date();
				now.setDate(now.getDate() - 1);
				document.cookie = 'carlist=null;expires=' + now;
				// 清空数组
				carlist = [];
				render();
			}
		</script>
	</body>

</html>