HTML+CSS+JS仿京东购物车页面动态效果

目录

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.getElementsByName("fav");

1.2 循环语句

    for(var i in fav){
            
        fav[i].checked=flag;
            
        }

1.3 文档修改语句   

document.getElementById("zongz").innerText=0;

1.4 模块移除属性

div.remove();

2 HTML代码

	
		
		
		
		
		
		
		
		
		
		
	
	
		
		
		  
		  

		  	
		  	
		  	 

		  	 	
		  	 	  

		  	 	  	
 京东首页
		  	 	  	
配送到：北京
		  	 	  
		  	 	
		  	 	
		  	 	  

		  	 	  	
洋洋宝贝|
		  	 	  	
我的订单|
		  	 	  	
我的京东|
		  	 	  	
京东会员|
		  	 	  	
企业采购|
		  	 	  	
京东手机|
		  	 	  	
关注京东|
		  	 	  	
客户服务|
		  	 	  	
网站导航
		  	 	  
		  	 	
		  	 
		  	
		  	
		  	
		  
		  
		
		
		
		
		  

		  	
		  	  

		  	  	  
		  	  	  
		  	  	  
		  	  	  
		  	  	  
		  	  	  

		  	  	  	 
		  	  	  	  
		  	  	  	
		  	  	  	  
		  	  	  	
		  	  	  
		  	  	
		  	  	
		  	  
		  	
		  
		
		
		
		
		  

		  	
		  	  
全部商品
		  	   
		  	  

		  	  	 
		  	  	 配送到
		  	  	
		  	  	
		  	  		昌平区
		  	  		
		  	  		顺义区
		  	  		
		  	  		大兴区
		  	  		
		  	  		朝阳区
		  	  		
		  	  		昌平区
		  	  		
		  	  		
		  	  	
		  	  	
		  	  
		  	
		  
		
		
		
		
		  

		  	
		  	 

		  	 	

		  	 		
		  	 		全选
		  	 	
		  	 	
商品
		  	 	
单价
		  	 	
数量
		  	 	
小计
		  	 	
操作
		  	 
		  	
		  	
		  
		
		
		
		  

		  	
		  	  

		  	  	
 
		  	  	
  
		  	  	
【京东超市】desha春秋季儿童休闲服
		  	  	
颜色：灰色+粉红 
		  	  	
￥182.5
		  	  	

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  	
		  
		
		 

		  	
		  	  

		  	  	
 
		  	  	
  
		  	  	
【京东超市】desha春秋季儿童休闲服
		  	  	
颜色：灰色+粉红 
		  	  	
￥182.5
		  	  	

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  	
		  
		  
		   

		  	
		  	  

		  	  	
 
		  	  	
  
		  	  	
【京东超市】desha春秋季儿童休闲服
		  	  	
颜色：灰色+粉红 
		  	  	
￥182.5
		  	  	

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  	
		  
		
		
		
		
	   

	   	
	   	   

	   	   	

	   	   		
	   	   		
	   	   		全选
	   	   	
	   	   	
删除选中商品
	   	   	
移到我的关注
	   	   	
清除下柜商品
	   	   
	   	   
	   	   

	   	   	
	   	   	 
已经选择1件商品
	   	   	 
总价 ￥12
	   	   	 

	   	   	 	去结算
	   	   	 	
	   	   	 
	   	   	
	   	   
	   	
	   	
	   
		
		
		
	

3 CSS代码

3.1 预处理css

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}

3.2 jd购物车页面的css

.nav{
	
	height: 30px;
	
	background-color: #f1f1f1;
	
}


.warp{
	
	width: 1000px;
	
	margin: 0px auto;
	
}

.nav_ul1,.nav_ul2 li{
	
	float: left;
	
}

.nav_ul1 li{
	
	float: left;
	
	line-height: 30px;
	
	margin-right: 20px;
}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
	
	font-size: 12px;
	
	color: gray;
	
}

.nav_ul2{
	
	float: right;
	
}
.nav_ul2 li,.nav_ul2 span{
	
	line-height: 30px;
	
	margin-left: 15px;
	
}
.nav a:hover{
	
	color: red;
	
}

/*搜索框开始*/

.search{
	
	margin-top: 20px;
	
}

.search img{
	/*清除之前的样式*/
	clear: both;
	
	float: left;
	
}

.search_div{
	
	float: right;
	
	margin-top: 25px;
	
}
.search_text{
	
	width: 265px;
	
	height: 21px;
	
	
	border: 3px solid #c91623;
	
	position: relative;
	
	left: 4px;
	
	top: -1px;
}

.search_but{
	
	width: 51px;
	
	height: 29px;
	
	background-color: #c91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
}

/*搜索框结束*/

/*标题开始*/
.title{
	
	margin-top: 130px;
	
}

.title h3{
	
	float: left;
	
	font-size: 23px;
	
	color:#c91623 ;
}


.title div{
	
	
	float: right;
	
	font-size: 14px;
	
	color:gray ;
}
/*标题结束*/

/*显示菜单的开始*/
.tips{
	
	width: 1000px;
	
	height: 50px;
	
	background-color: #f1f1f1;
	
	margin-top: 165px;
	
	border: 1px  solid  #e9e9e9;
	
}

.tips li{
	
	float: left;
	
	line-height: 50px;
	
	font-size: 12px;
	
	color: gray;
	
	
	
}

.tips li:nth-child(1){width: 90px; border-top: 3px solid #c91623 ;}

.tips li:nth-child(2){margin-left: 80px;}

.tips li:nth-child(3){margin-left: 430px;}

.tips li:nth-child(4){margin-left: 70px;}

.tips li:nth-child(5){margin-left: 110px;}

.tips li:nth-child(6){margin-left: 50px;}

/*显示菜单的结束*/


/*商品详情展示开始*/
.info{
	 width: 1000px;
	 
	 height: 125px;
	 
	 
	 background-color: #fff4e8;
	 
	 border: 1px  solid gray;
	 
	 margin-top: 30px;
	
	
	border-top: 3px solid  gray;
}

.info li{
	  float:  left;	
	  
	  margin-top: 20px;
}
.info a{
	
	font-size: 12px;
	
	color: #333333;
	
}
.info_1{
	
	margin-left: 23px;
	
}
.info_2{
	
	margin-left: 15px;
	
	border: 1px  solid gray;
	
}
.info_3{
	  
	  width: 270px;
	  
	  height: 20px;
	
}

.info_4{
	
	 margin-left: 45px;
	
}
.info_5{
	
	margin-left: 70px;
	
}
.info_6{
	
	 margin-left: 40px;
}
.info_6 input{
	
	width: 30px;
	
	height: 12px;
	
	text-align: center;
	
	position: relative;
	
	top: -2px;
	
	left: -5px;
	
}

.info_6 button{
	
	 width: 30px;
	 
	 height: 18px;
}
.bot{
	
	 position: relative;
	
	left: -10px;
}
.info_7{
	
	 margin-left: 40px;
}

/*商品详情展示结束*/


/*结算模块开始*/

.balance{
	
	width: 1000px;
	
	height: 50px;
	
	border: 1px  solid  gray;
	
	
	margin-top: 30px;
	
}

.balance_ul1,.balance_ul1>li,.balance_ul2>li{
	
	float: left;
	
	line-height: 50px;
	
	margin-left: 14px;
	
	
}
.balance_ul2{
	
	float: right;
}

.butt{
	
	width: 100px;
	
	height: 50px;
	
	background-color: #C91623;
	
	border: 0px;
	
	color: #FFFFFF;
	
	font-size: 20px;
	
	font-weight: bold;
	
}

.balance span{
	
	
	 font-size: 25px;
	 
	 color: #C91623 ;
	
	font-weight: bold;
}

/*结算模块结束*/

4 jd购物车页面的js

//获得所有的多选框对象
var  fav=document.getElementsByName("fav");

//判断是否全选操作
function checkTest1(th){
	
	var  flag =th.checked;
	
	
	for(var i in fav){
			
		fav[i].checked=flag;
			
		}

}
//单选决定全选操作
function  checkTest2(){
	 
	  var  flag =true;
	 
	  for(var i=1;i0){
		
		//获得节点的value值
	pre.value=Number(pre.value)-1;
	}
	
	}else {
		
	//获得上一个节点对象
	 pre=th.previousElementSibling;
	 //获得节点的value值
	pre.value=Number(pre.value)+1;
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价
	var val=pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格
	var zong =Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	
	pre.parentNode.nextElementSibling.innerHTML="￥"+zong;
	
	
	
	
}

//删除指定的节点
function  checkTest4(th){
	
	//获得父节点div
	
	var div=th.parentNode.parentNode.parentNode;
	
	div.remove();
	
	
}

5 效果展示