仿京东购物车--js，css混合应用

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量3.1k 收藏 33
点赞数 7
分类专栏： 前端 文章标签： Html 前端 js css 仿京东购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41731829/article/details/82688108
版权

这学期会用到RN 开发，顺便复习一下上学期的京东购物车

未购买物品

动态js添加购物车，结算选中商品，包括猜你喜欢和随手购两个物品菜单栏。

导航栏中的矢量图是从阿里上下载的，右侧固定菜单用绝对定位做了一个。

主要说几个点其他的在最后会把源码发上来，首先是比较核心的代码块

每次添加商品不管是拖拽还是直接点击按钮，js函数中其实就是单纯写了一个div然后把它作为参数赋值给了一个变量，然后在html页面的某一处div的id后面加上这个变量，也就是这里面的最后一句。

$（"#test1"）.append(content);其中第一个括号的test1就是html中的一个div的id，在它后面添加content这个变量，点击商品，隐藏原来背景图，添加新的div。

值得注意的是这里用的goodsId是html页面的传参，由于它已经是参数了，要把它从这个双引号中取出来，用到了字符连接符，假如用这个写的话一定要细心，注意什么时候用单引号，什么时候用双引号。

 

图中蓝线的那句话是在添加前先做个判定，如果我的购物车里没有这个商品我再放入新的div，如果有，则直接调用增加商品数量的函数

var list=$("#test1").find("#cart_item"+goodsId);

这句代码也是当时网上查到的，可以用来判断此时页面中是否有此id,如果有，则这个定义的list会返回一个值，导致变量长度大于0

下面这几个item_dv_id, cart_item_id,title等就是根据id，自动调用对应的css中的图片和样式以及html中的文字。

最后上一下源码，图片就不上传了，用户体验勉强可以，但是实现方法还是较low的，只是给一个思路

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8" >
	<link rel="stylesheet" type="text/css" href="css/cart.css">
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="js/cart.js"> 
		 
	</script>
</head>
<body>
	<div id="header">
		
		<ul id="test">
			<li class="iconfont">&#xe608</li>
			<li id="font">京东首页</li>
			<li class="iconfont1" id="fonttest">&#xe604  北京
				<ul id="item1">
					<ul id="heng">
						<li>北京</li>
						<li>上海</li>
						<li>天津</li>
						<li>重庆</li>
						<li>河北</li>
					</ul>
					<ul id="heng">
						<li>山西</li>
						<li>山西</li>
						<li>新疆</li>
						<li>辽宁</li>
						<li>吉林</li>
					</ul>
					<ul id="heng">
						<li>安徽</li>
						<li>江西</li>
						<li>河南</li>
						<li>山东</li>
						<li>湖南</li>
					</ul>
				</ul>
			</li>
		</ul>
		
		<div id="HeaderRg"> 
			<ul>
				<li>免费注册</li>
				<li>我的订单</li>
				<li>我的京东</li>
				<li>京东会员</li>
				<li>企业采购</li>
				<li>客户服务</li>
				<li>网站导航</li>
				<li style="border: none;">手机京东</li>
			</ul>
		</div>
	
	</div>
	<div id="hang2">
		<div id="logoDv"></div>
		<div id="Sousuo">
			<span id="kuang"><input type="text" value="自营"><span id="anniu"><input type="button" value="搜索"></span></span>
		</div>
	</div>
	<!-- 购物车显示区域 -->
	<div id="cart_display" ondrop="addItem1(event)" ondragover="allowDrop(event)" >
		<div id="cart_title">全部商品</div>
		<div id="DaoHang">
			<div class="select_cd" style="font-size: 10px;" ><input type="checkbox" id="box" onclick="allSelect();"> 全选</div>
			<div style="margin-left: 190px; display: inline-block;font-size: 10px;">商品</div>
			<div style="margin-left: 375px; display: inline-block;font-size: 10px;">单价</div>
			<div style="margin-left: 70px; display: inline-block;font-size: 10px;">数量</div>
			<div style="margin-left: 90px; display: inline-block;font-size: 10px;">小计</div>
			<div style="margin-left: 64px; display: inline-block;font-size: 10px;">操作</div>
		</div>
		<div id="test1" >
			
		</div>

		<!-- 背景图 -->
		<div id="BeiJing" ></div>


		<!-- <div class="cart_item" id="cart_item1">
			<div class="cart_item_select">
				<div class="select_cd"><input type="checkbox" ></div>
				<div class="cart_item_image"><img class="item_image" src="images/favor1.jpg"> </div>

			</div>
			<div class="item_shangpin">React Native跨平台移动应用开发（第二版）</div>
			<div class="item_danjia" id="item_danjia1">
			￥78.2
			</div>
			<div class="item_shuliang">
				<input class="crement" type="button" value="-" onclick="crement();"><input class="number" id="number1" type="text" value="1" disabled="true"><input class="increment" type="button" value="+" onclick="increment();">
			</div>
			<div class="item_xiaoji" id="item_xiaoji1">
				
			</div>
			<div class="caozuo">
			<a href="javascript:removeItem();">删除</a>	
			</div>
		</div> -->
		<div id="jiesuan">
			<div  class="select_cd" style="font-size: 10px;"><input type="text"   onclick="allremove();"> 全选</div>
			<div style="margin-left: 10px; display: inline-block;font-size: 10px;cursor: pointer;"  onclick="selectremove();" >删除选中的商品</div>
			<div style="margin-left: 10px; display: inline-block; font-size: 10px;font-weight: bold;cursor: pointer;" onclick="allremove();">清理购物车</div>
			<div style="margin-left: 520px; display: inline-block;font-size: 10px;" id="SPnumber">已选择0件商品</div>
			<div style="margin-left: 10px; display: inline-block; font-size: 10px;font-weight: bold;" id="zongjia">总价：</div>
			<div id="anniu1"><input type="button" value="去结算" onclick="Alljs();"></div>
		</div>
	</div>
	
	<!-- 商品工具条 -->
	<div id="item_bar">
		 <div class="left_style" id="guess">猜你喜欢</div>
		 <div class="left_style" id="shopping">随手购</div>
		 <div class="right_style" id="yuandian1"></div>
		 <div class="right_style1" id="yuandian2"></div>
	</div>
	<!-- 猜你喜欢面板 -->
	<div id="favor_dv">
		<div class="item_dv" id="item_dv1" draggable="true" ondragstart="drag(event)"  >
			<div class="image favor_image1"></div>
			<div class="title">React Native跨平台移动应用开发（第二版）</div>
			<div class="price">￥78.20</div>
			<div class="favor_cart" onclick="addItem(1);"></div>
		</div>

		<div class="item_dv" id="item_dv2" draggable="true" ondragstart="drag1(event)">
			<div class="image favor_image2"></div>
			<div class="title">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</div>
			<div class="price">￥399.00</div>
			<div class="favor_cart" onclick="addItem(2)"></div>
		</div>
		<div class="item_dv" id="item_dv3" draggable="true" ondragstart="drag2(event)">
			<div class="image favor_image3"></div>
			<div class="title">React Native 移动开发实战<br><br></div>
			<div class="price">￥39.00</div>
			<div class="favor_cart" onclick="addItem(3)"></div>
		</div>
		<div class="item_dv" id="item_dv4" draggable="true" ondragstart="drag3(event)">
			<div class="image favor_image4"></div>
			<div class="title">Vue.js 前端开发快速入门与专业前端<br><br></div>
			<div class="price">￥409.00</div>
			<div class="favor_cart" onclick="addItem(4)"></div>
		</div>
	</div>
<!-- 随手购 -->
	<div id="shopping_dv" >
		<div class="item_dv" id="item_dv5" draggable="true" ondragstart="drag4(event)">
			<div class="image favor_image5"></div>
			<div class="title">jQuery Mobile 移动网站开发<br><br></div>
			<div class="price">￥78.20</div>
			<div class="favor_cart" onclick="addItem(5)"></div>
		</div>

		<div class="item_dv" id="item_dv6" draggable="true" ondragstart="drag5(event)">
			<div class="image favor_image6"></div>
			<div class="title">360随身wifi 300M 无线网卡 迷你路由器 黑色</div>
			<div class="price">￥399.00</div>
			<div class="favor_cart" onclick="addItem(6)"></div>
		</div>
		<div class="item_dv" id="item_dv7" draggable="true" ondragstart="drag6(event)">
			<div class="image favor_image7"></div>
			<div class="title">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</div>
			<div class="price">￥39.00</div>
			<div class="favor_cart" onclick="addItem(7)"></div>
		</div>
		<div class="item_dv" id="item_dv8" draggable="true" ondragstart="drag7(event)">
			<div class="image favor_image8"></div>
			<div class="title">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</div>
			<div class="price">￥409.00</div>
			<div class="favor_cart" onclick="addItem(8)"></div>
		</div>
	</div>
	  <div id="sidebar-right">
            <div id="P1">
           
            </div>
            <div id="P2">
           
            </div>  
            <div id="P3">
           
            </div>  
            <div id="P4">
           
            </div>
            <div id="P5">
            </div>     
           <div id="P6">
            </div>
      </div>  
</body>
</html>
*{
	padding: 0px;
	margin: 0px;

}
@font-face{
	font-family: iconfont;
	src:url(font/iconfont.eot);
	src:url(font/iconfont.ttf);
	src:url(font/iconfont.woff);
}

#header{
	width: 100%;
	height: 30px;
	line-height: 30px;

	/*border: 1px solid;*/
	background-color: #e3e4e5;
	margin:0 auto;
}



#HeaderRg{
	width: 600px;
	height: 30px;
	margin-right: 265px;
	float: right;
	/*border: 1px solid;*/
	display: inline-block;

}
#HeaderRg li{
	float: left;
	list-style: none;
	padding-left: 7px;
	padding-right: 7px;
	border-right: 1px solid #a9b1c0;
	font-size: 15px;
	color: #a9b1c0;
}
#test{
	margin-left: 250px;
	display: inline-block;
}
#Sousuo{
	float: right;
	width: 250px;
	height: 30px;
	line-height: 40px;
	/*border: 1px solid;*/
	display: inline-block;
	margin-top: 7px;
	margin-right: 7px;
}
#kuang{
	float: left;

	/*display: inline-block;*/
	margin-left: 17.5px;
	/*margin-top: 3px;*/
	/*right: 0px;*/
}
	#kuang input{
		width: 130px;
		/*margin-top: 3px;*/
		height: 24px;
		/*line-height: 26px;*/
		font-size: 15px;
		color: #a9b1c0;
		border: 3px solid #dc0000;
		border-bottom: 3.5px solid #dc0000;
	}
#anniu{
	float: right;
	margin-top: 6px;
	margin-right: 10px;
	height: 30px;
	line-height: 30px;
	width: 60px;
	/*margin-top: 10px;*/
	background-color: #dc0000;
	/*border: 3px solid #dc0000;*/
	/*color: white;*/
}
#anniu input{
	/*margin-top: 0px;*/
	/*float: right;*/
	height: 25px;
	width: 60px;
	background-color: #dc0000;
	color: white;
	border: 3px solid #dc0000;
	cursor: pointer;
}
#font{
	display: inline-block;
	font-size: 15px;
	color: #a9b1c0;
}
#fonttest{
	display: inline-block;
	font-size: 15px;
	color: #a9b1c0;
	padding-left: 5px;
	width: 70px;
}
#item1{
	display: none;
	position: fixed;
	/*border: 1px solid red;*/
	/*margin-left: 100px;*/
	z-index: 2;
}
#heng{
	color: #a9b1c0;
	background-color: white;
	width: 220px;
	line-height: 40px;
	height: 40px;
	/*border: 1px solid green;*/
	list-style: none;
}
#heng li{
	padding-left: 10px;
	font-size: 15px;
	float: left;
}
#hang2{

	width: 990px;
	height: 50px;
	/*border: 1px solid;*/
	margin: 0 auto;
	margin-top: 40px;
}
#logoDv{
	width: 134px;
	height: 42px;
	background-position: 0px 0px;
    background-image: url("../images/logo.png");
    display: inline-block;
}
#tianchong{
	width: 990px;
	height: 300px;
	line-height: 300px;
	margin: 0 auto;
}
#BeiJing{
	width: 715px;
	height: 230px;
	background-position: 0px 0px;
    background-image: url("../images/beijing.PNG");
    margin:0 auto;
}
.iconfont{
	font-family: iconfont;
	font-size: 20px;
	
	color: #8f6f6d;
	display: inline-block;
}
.iconfont1{
	font-family: iconfont;
	font-size: 20px;
	margin-left: 10px;
	color: #8f6f6d;
	display: inline-block;
}
#cart_display{
	width: 990px;
	/*height: 300px;*/
	/*border: 1px solid;*/
	margin: 0 auto;
	margin-bottom: 15px;
}
#cart_title{
	width: 80px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid;
	color: #dc0000;
	font-weight: bold;
}
#DaoHang{
	height: 40px;
	line-height: 40px;
	display: inline-block;
	width: 990px;
	margin: 0 auto;
	color:  #a9b1c0;
	background-color: #e3e4e5; 
}
#jiesuan{
	height: 40px;
	line-height: 40px;
	display: inline-block;
	border: 1px solid #e3e4e5;
	width: 990px;
	margin: 0 auto;
	margin-top: 5px;
	color:  #a9b1c0;
	/*background-color: #e3e4e5; */
}
#jiesuan input{
	width: 12px;
	height: 12px;
}
#anniu1{
	/*margin-left: 50px;*/
	width: 100px;
	height: 40px;
	/*background-color:#dc0000;*/
	display: inline-block; 
}
#anniu1 input{
	cursor: pointer;
	border: none;
	width: 100px;
	height: 30px;
	background-color: #dc0000;

}
.cart_item{
		width: 990px;
		height: 136px;
		border-top: 1px solid #c5c5c5;
		background-color: #fff4e8;
	}
	.cart_item_select{
		width: 123px;
		height: 84px;
		/*border: 1px solid;*/
		margin-top: 15px;
		float: left;
	}
	.select_cd{
		float: left;
		margin-right: 10px;

	}
	.cart_item_image{
		float: left;
		width: 80px;
		height: 84px;
		/*background: url("../images/favor1.jpg");*/
	}
	.item_image{
		width: 80px;
		height: 84px;
	}
	.item_shangpin{
		width: 208px;
		float: left;
		font-size: 12px;
		margin-top: 15px;
		color: black;
		font-weight: normal;
	}
	.item_danjia{
		float: left;
		width: 330px;
		font-size: 12px;
		margin-top: 15px;
		color: black;
		font-weight: normal;
		text-align: right;
	}
	.item_shuliang{
		width: 140px;
		float: left;
		margin-top: 15px;
		text-align: center;
	}
	.crement{
		width: 17px;
		height: 22px;
		background-color: white;
		border: 1px solid #cacaca;
	}
	.crement:hover{
		cursor: pointer;
	}
	.number{
		width: 46px;
		height: 20px;
		border: 0px solid;
		border-top: 1px solid #cacaca;
		border-bottom: 1px solid #cacaca;
		text-align: center;
		background-color: white;
	}
	.increment{
		width: 17px;
		height: 22px;
		background-color: white;
		border: 1px solid #cacaca;
	}
	.increment:hover{
		cursor: pointer;
	}
	.item_xiaoji{
		float: left;
		width: 80px;
		height: 45px;
		font-weight: 900;
		margin-top: 15px;
		text-align: center;
		/*border: 1px solid;*/
		font-size: 12px;
	}
	.caozuo{
		width: 75px;
		margin-top: 15px;
		text-align: right;
		font-size: 12px;
		color: black;
		float: left;
	}
	.caozuo a{
		color: black;
		text-decoration: none;
	}
#item_bar{
	width: 990px;
	margin: 0 auto;
	height: 23px;
	line-height: 23px;
	border: 1px solid;

}
	.left_style{
		float: left;
		/*border: 1px solid;*/
		font-size: 12px;
		color: #8f668f;
		margin-right: 20px;
	}
	.right_style{
		margin-top: 7.5px;
		float: right;
		margin-right: 5px;
		width: 8px;
		height:8px;
		border-radius: 4px;
		background-color: #aaa;
	}
	.right_style1{
		margin-top: 7.5px;
		float: right;
		margin-right: 5px;
		width: 32px;
		height:8px;
		border-radius: 4px;
		background-color:#dc0000;
	}
	#favor_dv{

		width: 991px;
		margin: 0 auto;
		height: 326px;
		border: 1px dashed #cacaca; 
		margin-top: 10px;
		border-right: 0px;
	}

	.item_dv{
		width: 246px;
		height: 326px;
		/*display: inline-block;*/
		float: left;
		border-right: 1px dashed #cacaca;
		/*border: 1px bold red;*/
	}
	.item_dvTF{
		width: 246px;
		height: 326px;
		/*display: inline-block;*/
		float: left;
		border: 1px dashed red;
		cursor: pointer;
	}
	
	.image{
		width: 160px;
		height: 160px;
		margin: 0 auto;
		margin-top: 20px;
		/*border: 1px solid;*/
		/*background: url("../images/favor1.jpg")*/
	}
	.favor_image1{
		background: url("../images/favor1.jpg")

	}
	.favor_image2{
		background: url("../images/favor2.jpg")
	}
	
	.favor_image3{
		background: url("../images/favor3.jpg")
	}
	
	.favor_image4{
		background: url("../images/favor4.jpg")
	}
	.favor_image5{
		background: url("../images/shopping1.jpg")
	}
	.favor_image6{
		background: url("../images/shopping2.jpg")
	}
	.favor_image7{
		background: url("../images/shopping3.jpg")
	}
	.favor_image8{
		background: url("../images/shopping4.jpg")
	}
	.title{
		width: 80%;
		/*border: 1px solid;*/
		font-size: 12px;
		margin: 0 auto;
		margin-top: 10px;
	}
	.price{
		margin: 0 auto;
		margin-top: 10px;
		color: #c91623;
		font-size: 14px;
		text-align: center;
	}
	.iconfont1_hover{
		background-color: white;
		cursor: pointer;
	}
	.favor_cart{
		margin: 0 auto;
		margin-top: 10px;
		border: 1px solid #999999;
		border-radius: 4px;
		width: 115px;
		height: 28px;
		background: url("../images/cart1.png");
	}
	.favor_cart_hover{
		border: 0px;
		cursor: pointer;
		background: url("../images/cart2.png");	
	}
	#shopping_dv{

		width: 990px;
		margin: 0 auto;
		height: 326px;
		border: 1px dashed #cacaca; 
		margin-top: 10px;
		border-right: 0px;
		display: none;
	}
	.kuang{
		border: 1px dashed #red;
	}
	
	 #sidebar-right{

                  border-right: 6px solid gray;
                  height: 100%;
                  position: fixed;
                  top: 0;
                  right: 0;
            }


      #P1{
                  width: 25px;
                  height:25px;
                  background-position: -120px -230px;
                  position: fixed;
                  right:6px;
                  top:220px;
                  
                  background-image: url("../images/test.PNG");
            }
            #P2{
                 width: 25px;
                  height:25px;
                  background-position: -73px -11px;
                  position: fixed;
                  right:6px;
                  top:248px;
                 
                  background-image: url("../images/test.PNG");
            }
             #P3{
                 width: 25px;
                  height:25px;
                  background-position: -73px -75px;
                  position: fixed;
                  right:6px;
                  top:276px;
                  
                  background-image: url("../images/test.PNG");
            }
             #P4{
                 width: 25px;
                  height:25px;
                  background-position: -72px -136px;
                  position: fixed;
                  right:6px;
                  top:304px;
                  
                  background-image: url("../images/test.PNG");
            }
             #P5{
                 width: 25px;
                  height:25px;
                  background-position: -248px -200px;
                  position: fixed;
                  right:6px;
                  top:332px;
                  
                  background-image: url("../images/test.PNG");
            }
            #P6{
                 width: 25px;
                  height:25px;
                  background-position: -73px -200px;
                  position: fixed;
                  right:6px;
                  top:360px;
                  
                  background-image: url("../images/test.PNG");
            }


$(function(){
	$(".favor_cart").hover(function(){
		$(this).addClass("favor_cart_hover"); 
	},function(){
		$(this).removeClass("favor_cart_hover");
	});

	$('#BeiJing').show();
		$('#cart_title').hide();
		$('#DaoHang').hide();
		$('#jiesuan').hide();

	$("#shopping").hover(function(){
		$("#favor_dv").hide();

		$("#shopping_dv").show();
		$("#yuandian1").addClass("right_style1");
		$("#yuandian2").removeClass("right_style1");
		$("#yuandian2").addClass("right_style");

	},null);

	$("#guess").hover(function(){
		$("#shopping_dv").hide();
		$("#favor_dv").show();
		$("#yuandian2").addClass("right_style1");
		$("#yuandian1").removeClass("right_style1");
	},null);

	$("#header>ul>li").mouseover(function(){
		$(this).addClass("iconfont1_hover");
		$(this).children('ul').show();
	});
	$("#header>ul>li").mouseout(function(){
		$(this).removeClass("iconfont1_hover");
		$(this).children('ul').hide();
	});

	$(".item_dv").hover(function(){
		$(this).addClass("item_dvTF"); 
	},function(){
		$(this).removeClass("item_dvTF");
	});

});
var Itemnumber=0;
var SPNB=0;
var ZJ=0;
//点击按钮增加数量
function increment(goodsId){

	var new_num=parseInt($("#number"+goodsId).val())+1;
	// alert(goodsId);
	$("#number"+goodsId).val(new_num);
	itemPrice(goodsId);
}
//点击按钮减少数量
function crement(goodsId){

	var new_num=parseInt($("#number"+goodsId).val())-1;
	if(new_num>=1){
	$("#number"+goodsId).val(new_num);
	itemPrice(goodsId);
	}
	
}
function selectremove(){
	for(i=1;i<9;i++){
		
	if($('#SELE'+i).is(':checked')){
			$("#cart_item"+i).remove();
			Itemnumber=Itemnumber-1;
	//alert(Itemnumber);
	if(Itemnumber==0){

		$('#BeiJing').show();
		$("#SPnumber").text("已选择0件商品");
		$("#zongjia").text("￥0");
		$('#cart_title').hide();
		$('#DaoHang').hide();
		$('#jiesuan').hide();
	}

		}
	}
	$("#SPnumber").text("已选择0件商品");
	$("#zongjia").text("￥0");
}
// 计算小计的内容
function itemPrice(goodsId){

	var shuliang=parseInt($("#number"+goodsId).val());
	var jia=$("#item_danjia"+goodsId).text().replace("￥","");
	
	var xiaoji=jia*shuliang;

	$("#item_xiaoji"+goodsId).text("￥"+xiaoji.toFixed(2));
}
// 删除一条商品
function removeItem(goodsId){
	$("#cart_item"+goodsId).remove();
	Itemnumber=Itemnumber-1;
	//alert(Itemnumber);
	// alert(Itemnumber);
	if(Itemnumber==0){

		$('#BeiJing').show();
		$("#SPnumber").text("已选择0件商品");
		$("#zongjia").text("￥0");
		$('#cart_title').hide();
		$('#DaoHang').hide();
		$('#jiesuan').hide();
	}
}

//全选
function allSelect(){
	// alert("111");
	$("input[type='checkbox']").prop("checked","true");
	
}
//全删 
function allremove(){
	for(i=1;i<9;i++){
		$("#cart_item"+i).remove();
	}
	$('#BeiJing').show();
	$("#SPnumber").text("已选择0件商品");
	$("#zongjia").text("￥0");
		$('#cart_title').hide();
		$('#DaoHang').hide();
		$('#jiesuan').hide();
}
//添加一条商品到购物车

function addItem(goodsId){

	//判断是否有这个商品
	var list = $("#test1").find("#cart_item"+goodsId);
		if(list.length > 0){
			increment(goodsId);


		}
		else{

	$('#cart_title').show();
	$('#DaoHang').show();
	$('#jiesuan').show();
	$('#BeiJing').hide();
	var item_dv_id="#item_dv"+goodsId;
	var cart_item_id="cart_item"+goodsId;
	var title=$(item_dv_id+" .title").text();
	Itemnumber=Itemnumber+1;
	//alert(Itemnumber);
	
	var img_url=$(".favor_image"+goodsId).css("background-image");

	img_url = img_url.split("(")[1].replace(")","");
	 jiage=$(item_dv_id+" .price").text();
	
	// alert(jiage);
	

	var content="<div class='cart_item' id='"+cart_item_id+"'>"
			+"<div class='cart_item_select'>"
			   +"<div class='select_cd'><input id='SELE"+goodsId+"' type='checkbox' ></div>"
			   +"<div class='cart_item_image'><img class='item_image' src="+img_url+"> </div>"

			+"</div>"
		+"<div class='item_shangpin'>"
		+title
		+"</div>"
		+"<div class='item_danjia' id='item_danjia"+goodsId+"'>"
			+jiage
			+"</div>"
			+"<div class='item_shuliang'>"
				+"<input class='crement' type='button' value='-' onclick='crement("+goodsId+");'><input class='number' id='number"+goodsId+"' type='text' value='1' disabled='true'><input class='increment' type='button' value='+' onclick='increment("+goodsId+");'>"
			+"</div>"
			+"<div class='item_xiaoji' id='item_xiaoji"+goodsId+"'>"
			+jiage
			+"</div>"
			+"<div class='caozuo'>"
			+"<a href='javascript:removeItem("+goodsId+");'>删除</a>"	
			+"</div>"
		+"</div>";
		$("#test1").append(content);
	}
}

//结算
function Alljs(){

	for(i=1;i<9;i++){
		var test5=parseInt($("#number"+i).val());
	if($('#SELE'+i).is(':checked')&&test5>1){
		SPNB=SPNB+parseInt($("#number"+i).val());
		SPNB=SPNB-1;
		
		}
	
	}
	
	if($('#box').is(':checked')) {
		
	
 	var shuliang=$("input[type='checkbox']:checked").length-1+SPNB; 
 	
}else{
	
	var shuliang=$("input[type='checkbox']:checked").length+SPNB;
	
}
	
	$("#SPnumber").text("已选择"+shuliang+"件商品");
	for(i=1;i<9;i++){

	if($('#SELE'+i).is(':checked')){
		var test4=$("#item_xiaoji"+i).text();
		test4 = test4.split("￥")[1];
		
		ZJ=ZJ+parseFloat(test4);
		
		$("#zongjia").text("总价：￥"+ZJ.toFixed(2));

	}
	}
	ZJ=0;
	SPNB=0;
	
}


//拖拽

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("asdf",1);	

}

function drag1(ev)
{
ev.dataTransfer.setData("asdf",2);

}

function drag2(ev)
{
ev.dataTransfer.setData("asdf",3);

}

function drag3(ev)
{
ev.dataTransfer.setData("asdf",4);

}

function drag4(ev)
{
ev.dataTransfer.setData("asdf",5);

}

function drag5(ev)
{
ev.dataTransfer.setData("asdf",6);

}

function drag6(ev)
{
ev.dataTransfer.setData("asdf",7);

}

function drag7(ev)
{
ev.dataTransfer.setData("asdf",8);

}

function addItem1(ev){

ev.preventDefault();
var data=ev.dataTransfer.getData("asdf");
	//判断是否有这个商品
	var list = $("#test1").find("#cart_item"+data);
		if(list.length > 0){
			increment(data);

		}
		else{

	$('#cart_title').show();
	$('#DaoHang').show();
	$('#jiesuan').show();
	$('#BeiJing').hide();
	var item_dv_id="#item_dv"+data;
	var cart_item_id="cart_item"+data;
	var title=$(item_dv_id+" .title").text();
	Itemnumber=Itemnumber+1;
	//alert(Itemnumber);
	
	var img_url=$(".favor_image"+data).css("background-image");

	img_url = img_url.split("(")[1].replace(")","");
	 jiage=$(item_dv_id+" .price").text();
	
	

	var content="<div class='cart_item' id='"+cart_item_id+"'>"
			+"<div class='cart_item_select'>"
			   +"<div class='select_cd'><input id='SELE"+data+"' type='checkbox' ></div>"
			   +"<div class='cart_item_image'><img class='item_image' src="+img_url+"> </div>"

			+"</div>"
		+"<div class='item_shangpin'>"
		+title
		+"</div>"
		+"<div class='item_danjia' id='item_danjia"+data+"'>"
			+jiage
			+"</div>"
			+"<div class='item_shuliang'>"
				+"<input class='crement' type='button' value='-' onclick='crement("+data+");'><input class='number' id='number"+data+"' type='text' value='1' disabled='true'><input class='increment' type='button' value='+' onclick='increment("+data+");'>"
			+"</div>"
			+"<div class='item_xiaoji' id='item_xiaoji"+data+"'>"
			+jiage
			+"</div>"
			+"<div class='caozuo'>"
			+"<a href='javascript:removeItem("+data+");'>删除</a>"	
			+"</div>"
		+"</div>";
		$("#test1").append(content);

		}
}

 

 

 

liankl123
关注
  • 7
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
原生js实现京东购物车效果
xuebinsunwumei的博客
12-01 774
html代码 <div class="container" id="conn" style="margin-bottom: 0;border-bottom: 1px solid transparent;"> <ul class="clearFix" style="margin-bottom: 20px;"> <li style="margin-left: 5px;width: 150px;"> <input type=
使用js jquery去搭建完成京东购物车
这个名字没什么特点的博客
01-22 1512
使用js jquery去搭建完成京东购物车使用html css完成基本页面使用js完成动态效果使用jquery完成动态效果 使用html css完成基本页面 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" hre
jQuery模仿京东商城购物车
09-13
jQuery模仿京东商城购物车，可查看购物车商品，删除商品，登录等功能。
仿京东购物车页面
04-18
仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1253
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
HTML+CSS+JS仿京东购物车页面动态效果
热门推荐
赵广陆
04-30 1万+
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd购物车页面的js 5 效果展示 1 用到的知识 前面静态页面知识：HTML+CSS仿京东购物车页面静态页面 1.1 js选择器 var fav=document....
原生js实现京东购物车
winterFlower1314的博客
04-27 3842
纯原生js实现京东购物车效果页面布局页面css页面效果js 完整代码 作为一名前端开发人员，购物的逻辑是经常遇到的， 尤其是商城类网站，订餐程序等，都需要购物车， 实际开发中购物车的逻辑相对简单，每一步操作都有后台数据作为支撑， 前端的主要的工作就是请求接口，渲染数据， 进行基础的逻辑判断处理； 但是在没有后台配合的情况下，纯粹的前端实现京东购物的完整逻辑，那就是有一定困难了 。。。 如果是一个前端小白，初学js的时候，一个头两个大， 在遇到购物车这样复杂的逻辑。头发都要掉光光了。。。 话不多说，直接给大
京东的静态网页购物车html
09-15
看别人发的静态网页不怎么好看就给大家一份可以做期末作品解压就可以用的，都有备注的，看别人发的静态网页不怎么好看就给大家一份可以做期末作品解压就可以用的，都有备注的，
web前端学习日记15------angularjs京东购物车继续
u013637066的专栏
08-09 318
今日任务： 1.继续angularjs研究，添加两个功能和 2.投封简历 3.复习h5和css3的相关知识
京东购物车html页面,仿京东购物车页面
weixin_39571404的博客
06-03 346
【实例简介】仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面【实例截图】【核心代码】仿京东└── 仿京东├── css│ ├── imitatestyle.css│ ├── juicyslider.css│ └── juicyslider-min.css├── img│ ├── 201511060611068900.jpg│ ├─...
JavaScript案例-js购物车
02-16
在这个“JavaScript案例-js购物车”中，我们将深入探讨如何使用JavaScript技术来构建一个基本的在线购物车功能。购物车是电商网站不可或缺的一部分，它允许用户选择商品并保存这些选择，直到他们准备结账。 首先，...
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
ios-仿京东购物车.zip
07-11
在iOS开发领域，仿京东购物车的实现是一个常见的练习，旨在模拟京东购物车的功能和交互。这个项目"ios-仿京东购物车.zip"包含了开发者在短时间内构建的一个简易购物车模型，可能包含了一些基本的购物车功能，如商品...
android仿京东商城-demo
05-22
"Android仿京东商城-Demo"项目就是这样一个宝贵的资源，它为开发者提供了一个实践和理解电商应用设计的平台。这个Demo涵盖了Android开发中的多个重要知识点，包括UI设计、数据加载、网络请求、列表滚动优化以及...
HTML+CSS仿京东购物车页面静态页面
06-27
HTML和CSS是网页设计的基础，本项目以"HTML+CSS仿京东购物车页面静态页面"为主题，旨在通过实例教学帮助开发者掌握如何利用这两种语言构建一个类似京东购物车的交互式界面。下面将详细讲解其中涉及的关键知识点。 1...
js实现购物车效果
sinat_31766075的博客
01-09 3348
在网页中实现动态添加物品的效果. 代码如下:<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table {
仿京东购物车
Lyn2693282567的博客
06-20 126
仿京东购物车 全选 商品小计，总价计算
web前端学习日记14---angularjs实现京东购物车
u013637066的专栏
08-08 634
今日任务： 1.完成购物车至少两个功能 2.完善github相关 3.待续。 总结： 1.8.09-9.09一个功能的完成。
javascript div 没id_使用原生的JavaScript代码，完成京东的购物车基本效果制作
weixin_39851809的博客
11-24 132
一、概述 1. 字符集：UTF-8，操作系统版本：Windows7旗舰版 2.完成时间：2019.3.19 3.作者：任鑫 4.项目花费时间：2h 二.、项目描述 　　使用原生的JavaScript代码，完成京东的购物车基本效果制作 三、源代码 html代码 <!DOCTYPE html> <html> <head> <...
jquery仿京东购物车
12-29
以下是使用jQuery仿京东购物车的示例代码： ```html <!DOCTYPE html> <title>jQuery仿京东购物车 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> $(document).ready(function() { // 添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值