京东购物车（动态）网页搭建，利用JavaScript实现

需要实现的功能：

单选操作、全选操作、单行删除操作、多行删除操作、价格结算

使用的方式

JavaScript

项目环境

win10+Hbuilder+chrome浏览器

项目结构

项目效果

实现了所有功能的主界面

	
		
		
		
		
		
		
		
			
		
		
		
		
	
	
		
		

			
			

				

					

					
京东首页
					
配送到：宿州
				
				
				 

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

			

				
				
				

					
					 
					
				
			
		
		
		
		
		

			
全部商品
			
			

				配送至
				
					埇桥区
					灵璧县
					砀山县
					萧县
				
			
		
		
		
		
		
		
		

			
				

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

		  	
		  	  

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

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  	
		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  
		  
		  

		  	
		  	  

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

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  		
		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  
		  
		  

		  	
		  	  

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

		  	  		-
		  	  		
		  	  		+
		  	  		
		  	  	
		  	  	
￥182.5
		  	  	

		  	  		删除

		  	  		已到我的关注
		  	  	
		  	  
		  	
		  
		
		
		
			

				

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

				
已经选择0件商品
				
总价￥0
				
去结算
			
			
		
	

实现动态交互的JS代码

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

//判断是否是全选操作
function checkTest1(th){

	//判断选项是否被勾选
	var flag=th.checked;
	//alert(flag);
	
	
	//通过forech的方法遍历名为fav的有序列表
	for (var i in fav) {
		fav[i].checked=flag;
	}
}

//单选决定全选操作
function checkTest2(){
	
	var flag=true;
	
	/*遍历出去第一个和最后一个fav，后来再处理*/
	for (var i=1;i0) {
			//获得节点的value的值
			pre.value=Number(pre.value)-1;
		  }
		}else{
			//获得上个节点的对象
			pre=th.previousElementSibling;
			//获得下一个节点对象
			pre.value=Number(pre.value)+1;
		}
		
		
		//计算每个商品的价格
		//获取当前节点的父节点的上一个节点的内容，即每个商品的单价nnerText\innerHTML都可以
		var val=pre.parentNode.previousElementSibling.innerText;
		//计算总价格
		var zong=Number(val)*Number(pre.value);
		//把总价赋值给指定对象
		pre.parentNode.nextElementSibling.innerText="￥"+zong;
}


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

相关css文件

jd.css

/*导航栏开始*/
.nav{
	width:1920px ;
	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: 20px;
}

.search img{
	/*清除之前冲突样式  重点*/
	clear: both;
	float: left;
}

.search_div{
	float: right;
	margin-top: 20px;
}

.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;
}
/*border-top：加上边框加*/
.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_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 li,.balance_ul2 li{
	float: left;
	line-height: 50px;
	margin-left: 14px;
}

.balance_ul2{
	float: right;

}

.butt{

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

.balance_ul2 span{
	font-size:20px ;
	font-weight: bold;
	color: #C91623;
}
/*结算窗口结束*/

reset.css
统一控制页面格式的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;}

源代码已分享至本人云盘~~~
链接：https://pan.baidu.com/s/1ul_DbL2KVdETTc6himvfUA
提取码：7wbw
复制这段内容后打开百度网盘手机App，操作更方便哦