原生js实现简易购物车效果

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

luck_lin

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

阅读量4.3k

点赞数 2

分类专栏： javascript 文章标签：简易购物车原生js DOM

本文链接：https://blog.csdn.net/qwe502763576/article/details/79120186

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{list-style: none;}
	a{text-decoration: none;}
	.box{
		width: 1200px;
		border: 1px solid;
		margin: 50px auto 0;
	}
	.box ul{
		overflow: hidden;
	}
	.box ul li{
		width: 260px;
		height: 100px;
		font-size: 12px;
		float: left;
		margin-right: 53px;
		margin-bottom: 15px;
	}
	.box .product a img{
		float: left;
		width: 98px;
		height: 98px;
		border: 1px solid #ccc;
		margin-right: 10px;
	}
	.box .product .txt{
		float: left;
		width: 150px;
		height: 36px;
		line-height: 18px;
		overflow: hidden;
	}
	.box .product .price{
		float: left;
		width: 150px;
		color: #d91f20;
		font-size: 14px;
		margin-top: 5px;
		overflow: hidden;
	}
	.box .product .add_to_cart{
		float: left;
		width: 105px;
		height: 30px;
		border: 1px solid #ccc;
		margin-top: 8px;
		text-align: center;
		line-height: 30px;
	}
	.header{
		width: 1200px;
		/*height: 100px;*/
		border: 1px solid #ccc;
		margin: 0 auto;
	}
	.header .title{
		display: flex;
		justify-content: space-around;
		height: 30px;
		line-height: 30px;
		border: 1px solid #ccc;
		background: #f3f3f3;
	}
	.header .cart_list_box{
		max-height: 306px;
		overflow: auto;
	}
	.header .cart_list{
		border: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		border-bottom: none;
	}
	.header .cart_list li{
		float: left;
		height: 50px;
		width: 200px;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
		overflow: hidden;
		background: #fff4e8;
	}
	.header .cart_list li .img{
		width: 50px;
		height: 50px;
	}
	.product_total{
		width: 1200px;
		margin: 0 auto;
		overflow: hidden;
		outline: 1px solid #ccc;
	}
	.product_total .fr{
		float: right;
		width: 280px;
		height: 50px;
	}
	.product_total .fr p{
		float: left;
		line-height: 50px;
		color: #ccc;
		font-size: 12px;
	}
	.product_total .fr .calc{
		float: right;
		width: 110px;
		height: 50px;
		background: #e64346;
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
		font-size: 18px;
	}
	.product_total .fr p #total{
		color: orange;
		font-size: 22px;
	}
	.product_total .fr p i{
		font-size: 20px;
		color: orange;
		font-style: normal;
	}
	.product_total .fl #removeAll{
		float: left;
		margin-left: 500px;
		margin-top: 4px;
		width: 110px;
		height: 40px;
		background: #fff8f8;
		border: 1px solid #ffdfdf;
		color: #999;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}
</style>
</head>
<body>
	<div class="header">
		<ul class="title">
			<li>编号</li>
			<li>图片</li>
			<li>标题</li>
			<li>数量</li>
			<li>单价</li>
			<li>操作</li>
		</ul>
		<div class="cart_list_box">

		</div>
	</div>
	<div class="product_total">
		<div class="fl">
			<a href="javascript:void(0)" id="removeAll">清空购物车</a>
		</div>
		<div class="fr">
			<p>合计：<i>￥</i><span id="total">00.00</span></p>
			<a href="javascript:void(0)" class="calc">去结算</a>
		</div>
	</div>

	<div class="box">
		<h3>购买了该商品的用户还购买了</h3>
		<ul class="con">

		</ul>
	</div>
	<ul class="conModel">
		<li style="display: none">
			<div class="id" style="display:none">1</div>
			<a href=""><img class="img" src="images/01.jpg"></a>
			<p class="txt">益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装</p>
			<span class="price">￥13.90</span>
			<a href="javascript:void(0);" class="add_to_cart">加入购物车</a>
		</li>
	</ul>
<script>
	var json = [
		{"id":"1","img":"images/01.jpg","txt":"益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装","price":"￥13.90"},
		{"id":"2","img":"images/02.jpg","txt":"益达（Extra）尊享护齿56g*3瓶京东定制装（草本精华+冰","price":"￥24.90"},
		{"id":"3","img":"images/03.jpg","txt":"绿箭（DOUBLEMINT）无糖薄荷糖冰柠薄荷味35粒23.8g","price":"￥7.50"},
		{"id":"4","img":"images/04.jpg","txt":"益达（Extra）木糖醇无糖口香糖香浓蜜瓜40粒56g单瓶装","price":"￥8.80"},
		{"id":"5","img":"images/05.jpg","txt":"益达（Extra）无糖口香糖沁凉薄荷12片32g单盒装","price":"￥5.50"},
		{"id":"6","img":"images/06.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶 益达口香糖 休闲零食","price":"￥8.80"},
		{"id":"7","img":"images/07.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶*9口味组合休闲零食","price":"￥75.60"},
		{"id":"8","img":"images/08.jpg","txt":"益达 无糖口香糖70粒摇一摇四口味合装 赠益达西瓜味24","price":"￥52.90"}
	];
	var parent = $(".con",$(".box")[0])[0];
	for(var i = 0,len = json.length; i < len; i++){
		var clone = $("li",$(".conModel")[0])[0].cloneNode(true);
		if((i+1) % 4 === 0){
			clone.style.marginRight = "0";
		}
		clone.style.display = "block";
		clone.className = "product";
		clone.children[0].innerHTML = json[i].id;
		clone.children[1].children[0].src = json[i].img;
		clone.children[2].innerHTML = json[i].txt;
		clone.children[3].innerHTML = json[i].price;
		parent.appendChild(clone);
	}
	// 动态添加购物车列表
	var add_to_cart = $(".add_to_cart",$(".con")[0]);
	for(var j = 0,cartLen = add_to_cart.length; j < cartLen; j++){
		add_to_cart[j].onclick = function(){
			var cart_list = $(".cart_list",$(".header")[0]);
			for(var k =0, cart_list_len = cart_list.length; k < cart_list_len; k++){
				if(this.parentNode.children[0].innerHTML === $("li",$(".cart_list")[k])[0].innerHTML ){
					var num = ++cart_list[k].children[3].innerHTML;
					var prices2 = Number(cart_list[k].children[4].innerHTML.slice(1));
					$("#total").innerText = (Number($("#total").innerText) + prices2).toFixed(2);
					return;
				}
			}
			var clone = $(".title",$(".header")[0])[0].cloneNode(true);
			clone.className = "cart_list";
			clone.children[0].innerHTML = this.parentNode.children[0].innerHTML;
			clone.children[1].innerHTML = this.parentNode.children[1].innerHTML;
			clone.children[2].innerHTML = this.parentNode.children[2].innerHTML;
			clone.children[3].innerHTML = "1";
			clone.children[4].innerHTML = this.parentNode.children[3].innerHTML;
			clone.children[5].innerHTML = "<a href='javascript:void(0)' class='remove'>删除</a>";
			$(".cart_list_box",$(".header")[0])[0].appendChild(clone);
			var prices1 = Number(clone.children[4].innerHTML.slice(1));
			$("#total").innerText = (Number($("#total").innerText) + prices1).toFixed(2);
			// var id = this.parentNode.children[0].innerHTML,
			// 	img = this.parentNode.children[1].innerHTML,
			// 	txt = this.parentNode.children[2].innerHTML,
			// 	price = this.parentNode.children[3].innerHTML;
			// $(".header")[0].innerHTML += '<ul class="cart_list">'
			// 								+	'<li>'+id+'</li>'
			// 								+	'<li>'+img+'</li>'
			// 								+	'<li>'+txt+'</li>'
			// 								+	'<li>1</li>'
			// 								+	'<li>'+price+'</li>'
			// 								+	'<li><a class="remove" href="javascript:void(0)">删除</a></li>'
			// 								+'</ul>';

			// 删除购物车列表内指定商品
			for(var l = 0,remove_len = $(".remove").length; l < remove_len; l++){
				$(".remove")[l].onclick = function(){
					if(confirm("确认删除该商品？")){
						var price = (this.parentNode.parentNode.children[4].innerHTML).slice(1)
						var num = this.parentNode.parentNode.children[3].innerHTML;
						var removePrices = price * num;
						$("#total").innerText = (Number($("#total").innerText) - removePrices).toFixed(2);
						this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
					}
				}
			}
		}
	}

	// 清空购物车
	$("#removeAll").onclick = function(){
		for(var i = 0,len = $(".cart_list_box")[0].children.length; i < len; i++){
			$(".cart_list_box")[0].removeChild($(".cart_list_box")[0].children[0]);
		}
		$("#total").innerText = "00.00";		
	}
</script>
</body>
</html>

以上获取元素用了自己封装的选择器工具，在tool.js内

luck_lin

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
原生js实现简易购物车效果

Document *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} .box{ width: 1200px; border: 1px solid; margin: 50px auto 0; } .box ul{ overflow: hidden; } .box ul
复制链接

扫一扫

专栏目录