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

已于 2023-10-29 17:57:19 修改
阅读量1.2w 收藏 250
点赞数 33
分类专栏： front 文章标签： html css javascript
于 2020-04-30 16:29:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105864312
版权

目录

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 效果展示

想学习架构师构建流程请跳转：Java架构师系统架构设计

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代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		
		
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
	</head>
	<body>
		
		<!--导航开始-->
		  
		  <div class="nav">
		  	
		  	
		  	 <div class="warp">
		  	 	
		  	 	  <ul class="nav_ul1">
		  	 	  	<li><a href=""><i class="iconfont">&#xe6d3;</i> 京东首页</a></li>
		  	 	  	<li><a href="">配送到：北京</a></li>
		  	 	  </ul>
		  	 	
		  	 	
		  	 	  <ul class="nav_ul2">
		  	 	  	<li><a href="">洋洋宝贝</a><span>|</span></li>
		  	 	  	<li><a href="">我的订单</a><span>|</span></li>
		  	 	  	<li><a href="">我的京东</a><span>|</span></li>
		  	 	  	<li><a href="">京东会员</a><span>|</span></li>
		  	 	  	<li><a href="">企业采购</a><span>|</span></li>
		  	 	  	<li><a href="">京东手机</a><span>|</span></li>
		  	 	  	<li><a href="">关注京东</a><span>|</span></li>
		  	 	  	<li><a href="">客户服务</a><span>|</span></li>
		  	 	  	<li><a href="">网站导航</a></li>
		  	 	  </ul>
		  	 	
		  	 </div>
		  	
		  	
		  	
		  </div>
		  
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		  <div class="search">
		  	
		  	  <div class="warp">
		  	  	  
		  	  	  
		  	  	  <img src="img/logo.jpg" />
		  	  	  
		  	  	  
		  	  	  <div class="search_div">
		  	  	  	 
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  	
		  	  	  </div>
		  	  	
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		  <div class="title warp">
		  	
		  	  <h3>全部商品</h3>
		  	   
		  	  <div>
		  	  	 
		  	  	 <span>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>昌平区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" />
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul>
		  	
		  	
		  </div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="" id="" value="" />
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span>1</span>件商品</li>
	   	   	 <li>总价 <span>￥12</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>

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;i<fav.length-1;i++){
	  	
	  	 if(!fav[i].checked){
	  	 	
	  	 	flag=false;
	  	 	
	  	 	break;
	  	 }
	  }
	  
	  //决定框是否勾选
	  fav[0].checked=flag;
	  
	  fav[fav.length-1].checked=flag;
	  
	  
	  //价格是否统计
	  
	  //商品的总价格
	  var  zong =0;
	  
	  //统计是否有勾选的对象
	  var num=0;
	  
	  //统计商品的数量
	  var spNum=0;
	  
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	
	  	   if(fav[i].checked){
	  	   	
	  	   	  num++;
	  	   	  
	  	   	 //获得ul父节点
	  	   	 var par=fav[i].parentNode.parentNode;
	  	   	 //获得指定ul下面的所有的li
	  	   	 var li= par.getElementsByTagName("li");
	  	   	 
	  	   	 //单个商品的总价格
	  	   	 var z=li[6].innerText.split("￥")[1];
	  	   	 
	  	   	 //获得所有商品的总价格
	  	   	 zong+=Number(z);
	  	   	 
	  	   	 document.getElementById("zongz").innerText=zong;
	  	   	 
	  	   	 
	  	   	 //获得商品的数量
	  	   	 var z2=li[5].getElementsByTagName("input");
	  	   	 
	  	   	 var  num2=z2[0].value;
	  	   	 
	  	   	 spNum+=Number(num2);
	  	   	 
	  	   	 //获得商品数量统计的对象
	  	   	 
	  	   	 document.getElementById("snum").innerText=spNum;
	  	   	 
	  	   }
	  	
	  }
	  
	  
	  if(num==0){
	  	
	  	document.getElementById("zongz").innerText=0;
	  	
	  	document.getElementById("snum").innerText=0;
	  	
	  }
	
}

//控制数量的增加和减少
function  checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
	//获得下一个节点
	pre=th.nextElementSibling;	
	
	if(Number(pre.value)>0){
		
		//获得节点的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 效果展示

赵广陆
关注
  • 33
    点赞
  • 踩
  • 250
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
html5 css3手机端添加购物车商品列表动画特效
09-08
html5 css3手机端添加购物车商品列表动画特效
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1292
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
原生js实现京东购物车
winterFlower1314的博客
04-27 3845
纯原生js实现京东购物车效果页面布局页面css页面效果js 完整代码 作为一名前端开发人员，购物的逻辑是经常遇到的， 尤其是商城类网站，订餐程序等，都需要购物车， 实际开发中购物车的逻辑相对简单，每一步操作都有后台数据作为支撑， 前端的主要的工作就是请求接口，渲染数据， 进行基础的逻辑判断处理； 但是在没有后台配合的情况下，纯粹的前端实现京东购物的完整逻辑，那就是有一定困难了 。。。 如果是一个前端小白，初学js的时候，一个头两个大， 在遇到购物车这样复杂的逻辑。头发都要掉光光了。。。 话不多说，直接给大
京东购物车（html+css+js）
aa67567456的博客
12-05 9861
html+js部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的购物车</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <link rel="stylesheet" typ...
京东购物车（动态）网页搭建，利用JavaScript实现
时间静止
04-09 4934
需要实现的功能： 单选操作、全选操作、单行删除操作、多行删除操作、价格结算 使用的方式 JavaScript 项目环境 win10+Hbuilder+chrome浏览器 项目结构 实现了所有功能的主界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>...
JS实现购物车中的动态操作（全选、统计数据、结账）
xiao祁的博客
08-16 6597
html代码; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link ...
HTML+CSS仿京东购物车页面静态页面
06-27
HTML和CSS是网页设计的基础，本项目以"HTML+CSS仿京东购物车页面静态页面"为主题，旨在通过实例教学帮助开发者掌握如何利用这两种语言构建一个类似京东购物车的交互式界面。下面将详细讲解其中涉及的关键知识点。 1...
仿京东数码网页动态网页效果，纯css+html+JavaScript
07-13
标题中的“仿京东数码网页动态网页效果，纯css+html+JavaScript”指的是使用HTML、CSS和JavaScript这三种前端核心技术来创建一个与京东数码页面类似的功能和视觉效果的动态网页。这个项目旨在展示如何通过这些技术...
仿京东商城H5主页面源代码，html、css、js 下载
05-13
【描述】"仿京东商城H5主页面源代码，html、css、js"说明了这个项目主要由三部分组成：HTML负责结构，CSS负责样式，JavaScript则用于增加交互性。HTML（HyperText Markup Language）是网页的基础，它定义了网页的...
html+css+js实现京东商城
02-26
JavaScript是实现动态效果和交互的关键。在京东商城项目中，JavaScript可以处理用户的输入，如点击事件、表单验证。例如，我们可以使用JavaScript来实现商品的添加到购物车功能，实时更新购物车的数量，或者实现搜索...
基于html5和css3制作的京东商城的页面.zip
02-13
6. CSS3的增强：CSS3不仅在样式层面上提供了更多的选择器（如`:nth-child()`, `:not()`, `:checked`等），还引入了过渡（Transition）、动画（Animation）和3D转换等特效，使得京东商城的页面动态效果更加流畅自然。...
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
html购物车效果,模拟加入购物车效果
weixin_29913191的博客
06-04 245
html>模拟加入购物车效果*{margin:0pxauto;padding:0px;}.top{width:402px;height:35px;line-height:35px;text-align:center;margin-top:50px;background:#C40000;color:#fff;}.main{width:400px;height:400p...
javascript+css+html购物车案例
qq_36507046的博客
07-15 6408
javascript+css+html购物车案例，javascript代码部分主要实现三部分功能，1、商品数量增加（减少）同时小计增加（减少）2、封装一个用于计算总价和总量的函数3、删除功能
Html、Css、javaScript 网页制作之京东购物车
gdd1990shl的博客
04-07 5121
一.Html: 京东购物车.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <!--<link rel="stylesheet" type="text/css" href=
初学Html5+CSS之简易购物车（加入购物车+路由+结算+ionic）
TwoDogsAri的博客
11-19 4416
效果图 代码如下 index的代码： body { width: 800px; margin: 0 auto; } ul: { float: left; } #content { margin-top:
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
html简易的购物车,JavaScript实现简单的购物车
weixin_39915308的博客
06-07 936
最近刚好在了解web storage的知识，恰巧被朋友问及有没有做过购物车的功能，想了一下还真没有，然后试着写了这么一个例子。只是单纯的一个页面实现了购物车逻辑上的一些简单的功能：添加商品，以及购物车列表动态添加、删除，并实现商品总价格的更新。功能可能确实简单，但我还是将它分享出来，也算是对自己学习的一种鼓励。慢慢积累，终究也能成为大牛,加油下面是效果图：下面源代码：huanglw笔记之web s...
韩顺平讲解：HTML+CSS+JS网页设计深度解析
"51CTO下载-韩顺平html+css+js笔记" 网页设计是构建互联网应用程序的关键组成部分，而HTML、CSS和JavaScript是这一领域不可或缺的三大核心技术。韩顺平的html+css+js笔记提供了对这些技术的详细讲解，适合初学者和...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵广陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值