HTML+CSS+JS实操京东购物车

最新推荐文章于 2024-06-18 17:19:20 发布
最新推荐文章于 2024-06-18 17:19:20 发布
阅读量4.3k 收藏 91
点赞数 17
分类专栏： 网页设计加实操 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45841233/article/details/121702760
版权

京东购物车

在这里插入图片描述

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"/>
		
		<script type="text/javascript" src="js/jd.js" ></script>
	
		
	</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" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</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"   name="fav" onclick="checkTest2()"/> </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 onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img2.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】笔记本电脑</a></li>
		  	  	<li class="info_4"><a>颜色：银色</a> </li>
		  	  	<li class="info_5">3699</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥3699</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav"  onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img3.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】洗衣液</a></li>
		  	  	<li class="info_4"><a>重量：1斤，500ml</a> </li>
		  	  	<li class="info_5">28</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥28</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>

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;
}

/*结算模块结束*/

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;}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小李不吃绿皮青椒
关注
  • 17
    点赞
  • 踩
  • 91
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
在线商城之购物车实现——（附完整代码）
热门推荐
在有我的世界
06-29 1万+
1、首页 1.1实现效果 1.2代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线商城</title> <script src="jquery.min.js"></script> <style> ul { list-style: none; } a { text
基础购物车（Javascript）
最新发布
2301_81449444的博客
06-18 368
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
原生js实现京东购物车
winterFlower1314的博客
04-27 3843
纯原生js实现京东购物车效果页面布局页面css页面效果js 完整代码 作为一名前端开发人员，购物的逻辑是经常遇到的， 尤其是商城类网站，订餐程序等，都需要购物车， 实际开发中购物车的逻辑相对简单，每一步操作都有后台数据作为支撑， 前端的主要的工作就是请求接口，渲染数据， 进行基础的逻辑判断处理； 但是在没有后台配合的情况下，纯粹的前端实现京东购物的完整逻辑，那就是有一定困难了 。。。 如果是一个前端小白，初学js的时候，一个头两个大， 在遇到购物车这样复杂的逻辑。头发都要掉光光了。。。 话不多说，直接给大
JS实现简单的购物车
dxn16638400024的博客
06-30 3392
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 3902
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
vue实现京东购物车(简单版)
Free_Ya的博客
08-21 1455
文章目录前言一、自述：二、功能实现实现购物车增加、减少、删除功能总结 前言 一、自述： 博客小白，刚接触vue不久，由于写作品需要京东购物车这个功能板块，所以，在这里分享一下自己的实现思路以及部分代码。希望能帮助到大家。 效果如下： 二、功能实现 实现购物车增加、减少、删除功能 首先，博主先说一下自己的思路： 1.当用户选中商品并点击添加的时候，我们获取当前商品的id，然后把改商品存到vuex中的shopCart这个数组中。 这里因为每个人写的不同，答主就不放自己的代码了。 2.当用户来到购物车界面，
简易购物车（HTML/CSS/JS）
weixin_52841164的博客
03-18 1468
简易购物车，使用html，js，css。能够新增减少商品数量；能够新增商品种类；能够计算商品总价，总价随着商品数量变化而变化。
HTML+CSS+JS手机端购物车demo
10-18
在本项目"HTML+CSS+JS手机端购物车demo"中，我们将探讨如何利用前端技术栈，特别是HTML、CSS和JavaScript（以及Vue.js框架），来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...
html+css+js实现京东商城
02-26
在构建一个类似京东商城的网站时，HTML、CSS和JavaScript是三个核心的前端技术。HTML（HyperText Markup Language）用于创建网页结构，CSS（Cascading Style Sheets）用于设计页面样式，而JavaScript则负责交互性和...
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
仿京东购物车页面
04-18
仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面
jQuery模仿京东商城购物车
09-13
jQuery模仿京东商城购物车，可查看购物车商品，删除商品，登录等功能。
京东首页html+css+js
07-07
【京东首页html+css+js】项目是一个初学者在学习完JavaScript后尝试重构京东首页的实践案例。这个项目主要涉及HTML、CSS和JavaScript这三种前端核心技术，旨在锻炼开发者对网页结构设计、样式控制以及交互实现的理解...
京东首页Html+css+javascript代码
04-15
在本项目中，“京东首页Html+css+javascript代码”展示了如何使用前端开发的三大核心技术——HTML、CSS和JavaScript，来构建一个类似京东首页的网页。这个项目旨在帮助开发者理解购物网站的基本架构，并通过实践增强...
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、javaScript 网页制作之京东购物车
gdd1990shl的博客
04-07 5119
一.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=
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
Java-购物车实践与应用
陈丹宇的博客
10-21 857
购物车程序的面向对象设计 1.人员分工： 姓名 任务 陈丹宇 编码规范、面向对象设计、功能设计 韦早辉 前期调查、博客制作 2.前期调查： 2.1登录京东我们可以在搜索栏中搜索先要购买的商品名称 2.2搜索后可以看见商品的名称，价格，然后将心仪的一定数量的商品添加入购物车 2.3在购物车我们可以看见商品的总价，删除一定数量的商品，或者一键清空购物车，最后进行结账 3.系统系统描述： 登录京东，然后在搜索栏中输入商品名称,搜索后可以看见商品的编号，名称，价格，然后将心仪的一定数量
html+js+css购物车完整代码
12-25
以下是一个使用HTML、JS和CSS实现的购物车完整代码示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>购物车</h1> <table id="cart"> <thead> <tr> <th>商品</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td><input type="number" value="1"></td> <td>10.00</td> <td>10.00</td> <td><button class="remove">删除</button></td> </tr> <tr> <td>商品2</td> <td><input type="number" value="1"></td> <td>20.00</td> <td>20.00</td> <td><button class="remove">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计：</td> <td id="total">30.00</td> <td></td> </tr> </tfoot> </table> <script src="script.js"></script> </body> </html> ``` CSS部分（style.css）： ```css body { font-family: Arial, sans-serif; } h1 { text-align: center; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } tfoot td { font-weight: bold; } input[type="number"] { width: 50px; } button.remove { background-color: #f44336; color: white; border: none; padding: 5px 10px; cursor: pointer; } ``` JS部分（script.js）： ```javascript window.onload = function() { var cartTable = document.getElementById('cart'); var tr = cartTable.getElementsByTagName('tr'); var removeBtns = cartTable.getElementsByClassName('remove'); var total = document.getElementById('total'); // 计算合计 function getTotal() { var selected = 0; var price = 0; for (var i = 0, len = tr.length; i < len; i++) { if (tr[i].getElementsByTagName('input')[0].checked) { selected += parseInt(tr[i].getElementsByTagName('input')[1].value); price += parseFloat(tr[i].cells[3].innerHTML); } } total.innerHTML = price.toFixed(2); } // 删除商品 function removeProduct() { var currentTr = this.parentNode.parentNode; currentTr.parentNode.removeChild(currentTr); getTotal(); } // 绑定删除按钮的点击事件 for (var i = 0, len = removeBtns.length; i < len; i++) { removeBtns[i].onclick = removeProduct; } // 监听数量输入框的变化 for (var i = 0, len = tr.length; i < len; i++) { tr[i].getElementsByTagName('input')[1].onchange = getTotal; } }; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值