js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）

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

某某~

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

阅读量5.3k

点赞数 15

文章标签： html js

本文链接：https://blog.csdn.net/m0_62309118/article/details/120481827

版权

1.购物车效果展示

在这里插入图片描述

2.代码展示

<!DOCTYPE html>
<html>
	<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}.shop{
	width:900px;
	height:300px;
	border:1px solid red;
	margin:0 auto;
}.shoping{
	width:290px;
	height:300px;
	float:left;
	border:1px solid pink;
	margin-left:5px;
}.shoping>.imgs{
	width:200px;
	height:200px;
	margin:0 auto;
	border:1px solid gold;
	margin-top:10px;
}.imgs>img{
	width:200px;
	height: 200px;
}.car{
	width:900px;
	height:auto;
	/*border:1px solid blue;*/
	margin:0 auto;
	margin-top:10px;
}.shoping p{
	text-align: center;
}.gocar{
	width:100px;
	height:40px;
	background:red;
	border:none;
	color:#FFF;
}
#TB img{
	width: 100px;
	height: 100px;
}
</style>
	</head>
	<body>
		<div class='shop'>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../19放大镜/放大镜/707931695cd61f3dd254997cfa4a1f05.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>景甜一</p>
				<p class='pic'>998.00</p>
				<p>
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../19放大镜/04.放大镜操作/104764b93ce519ea580ea2114cd0fe8b.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>景甜二</p>
				<p class='pic'>99.00</p>
				<p >
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../上下换图/img/w.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>景甜三</p>
				<p class='pic'>195.00</p>
				<p>
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
	<div class="car">
		<table width="900" border="1" cellspacing="0" id="TB">
			
			<tr>
				<th width="40">
					<input type="checkbox" class="qx">
				</th>
				<th width="200">商品名字</th>
				<th width="150">图片</th>
				<th>价格</th>
				<th>数量</th>
				<th>单价</th>
				<th>操作</th>
			</tr>
		</table>
	</div>
	</div>
	</body>
	<script type="text/javascript">
		var obtn=document.getElementsByClassName('gocar')
		var otble=document.getElementById('TB')
		var imgs=document.getElementsByClassName('imgs')
		var oname=document.getElementsByClassName('name')
		var pic=document.getElementsByClassName('pic')
	for (var i=0;i<obtn.length;i++) {
		obtn[i].index=i;
		obtn[i].onclick=function(){
			// 当前 图片 名字 价格
			var onames=oname[this.index].innerHTML
			var opic=pic[this.index].innerHTML
			var oimg=imgs[this.index].innerHTML
			var otbody=otble.children[0]
			// 创建 tr
			var tr=document.createElement('tr');
			//在tr里面拼接代码
			tr.innerHTML="<th><input type='checkbox'/></th>"+
			'<th>'+onames+'</th>'+'<th>'+oimg+'</th>'
			+'<th>'+opic+'</th>'+'<th><button class="up">-</button><span class="number">1</span><button class="down">+</button></th>'
			+'<th class="dj">'+opic+'</th>'
			+'<th><span class="sc">删除</span>'
			//添加tr
			otbody.appendChild(tr)	
		//功能	
		// 获取tr
		var tr1=document.getElementsByTagName('tr')
		for (var i=0;i<tr1.length;i++) {
			tr1[i].index=i;
		tr1[i].onclick=function(e){
		var e=e||window.event;
		// target 返回点击目标  this 当前对象
		var el=e.target||e.srcElement;
	    //获取点击class
		var cls=el.className 
		var shuliag=this.getElementsByClassName('number')[0]
		var val=Number(shuliag.innerHTML)
		// switch 判断固定值
		switch(cls){
			case "down":
		    shuliag.innerHTML=val+1;
		    str(this)
		    break;
			case "up":
			if(val>1){
			shuliag.innerHTML=val-1;	
			}
			str(this)
			break;
			case "sc":
			var conf = confirm('确定删除此商品吗？');
			if(conf){
			this.parentNode.removeChild(this)	
			}
		
		  }
		}
	}
		function str(cc){
		var oa=cc.cells;
		var oa3=oa[3].innerHTML; 
		var shuliang=oa[4].getElementsByClassName('number')[0].innerHTML 
		oa[5].innerHTML=Number(oa3)*Number(shuliang)
		if(Number(shuliang)==1){
			alert("最后一件了")
		}
	}
		
		
	}
}	
	</script>
</html>

某某~

关注

15
点赞
踩
89

收藏

觉得还不错? 一键收藏
4
评论
js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）

1.购物车效果展示2.代码展示<!DOCTYPE html><html> <head><meta charset="UTF-8"><title></title><style type="text/css">*{ margin:0px; padding:0px;}.shop{ width:900px; height:300px; border:1px solid red; margin:0 au
复制链接

扫一扫