淘宝购物车页面效果实现 ,其中的全选中和结算跳转的逻辑也很完善

最新推荐文章于 2022-03-22 19:08:32 发布
置顶 最新推荐文章于 2022-03-22 19:08:32 发布
阅读量2.9k 收藏 28
点赞数 4
分类专栏： 淘宝购物车 文章标签： html5 html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42907074/article/details/106155823
版权

购物车页面
结构
HTML代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/01.css" rel="stylesheet" type="text/css"
		 media="all" /> 
		<title>淘宝购物车</title>
		<script>
			
			
			
			//对商品进行增加或者减少
			//对商品进行增加
		    function plusNum(name1){
				var Name = document.getElementsByName(name1);
				//获取当前商品的的信息
				var Num = Name[1].value;
				if(Num>=100){
					alert("库存不足！");
					Num--;
				}
				Num++;
				Name[1].value = Num;
			}
			
			//对商品数量进行降低
			function lowNum(name1){
				var Name = document.getElementsByName(name1);
				var Num = Name[1].value; 
				if(Num<=1){
					alert("宝贝不能减少了呢");
					Num++;
					}
				Num--;
				Name[1].value = Num;
			}
			//对商品进行删除命令
			//根据当前表格的索引号进行商品的删除
			function deleteRow(rowId){
					var Index=document.getElementById(rowId).rowIndex; 
					//获取当前行的索引号
					document.getElementById("tab1").deleteRow(Index);
					alert("宝贝不能减少了呢");
				}
				
			function deleteRow(rowId){
					var Index=document.getElementById(rowId).rowIndex; 
					
					document.getElementById("tab1").deleteRow(Index);
					
				}
				
				function disp_alert() 
				{ 
				alert("") 
				}
			
			
		</script>
		
		
		<script type="text/javascript"
		    src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
		   
		<script type="text/javascript"> 
		    //checkbox 全选/取消全选 
		    var isCheckAll = false; 
		    function swapCheck() { 
		        if (isCheckAll) { 
		            $("input[type='checkbox']").each(function() { 
		                this.checked = false; 
		            }); 
		            isCheckAll = false; 
		        } else { 
		            $("input[type='checkbox']").each(function() { 
		                this.checked = true; 
		            }); 
		            isCheckAll = true; 
		        } 
		    } 
		</script> 
	
	</head>
	<body>
		
		<div>
			<img src="img/4.png"/>
			<td width="350px"><font size="5" color="">购物车</font></td>
			<td width="60px"> </td>
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
			 &nbsp &nbsp &nbsp 
	<input  width="10px" id="box" style="width: 350px; height: 30px; color:blanchedalmond; border: 2px solid red;" type="text" name="search"  placeholder="请输入关键字">
		         <input   width="350px" style="width: 80px; height: 35px; color:blanchedalmond;border: none;" class="footer" id="search" type="button"  value="搜索">
		    </div>
				
				
	<table border="0">
		
			<td width="125px"> <input type="checkbox" id="check" onclick="swapCheck()">全选</td>
			
			<td width="330px">商品信息</td>
			<td width="250px">价格</td>
			<td width="280px">数量</td>
			<td width="200px">操作</td>
			<td> 加入收藏夹</td>	
			
		</tr>
	</table>
	<table>
		
		<tr>
			<td > <input type="checkbox"><img src="img/5.png"/>
			<a href="https://adidas.tmall.com/?spm=a220o.1000855.1997427721.d4918089.6bed1b60PGORGK" target="_blank">店铺：阿迪达斯旗舰店</a></td>	
		</tr>
	</table>
	
	
	<table id="tab1">
		       
		     <!-- 第一件商品 -->
			<tr id="shop1">
				<td width="85px"><input type="checkbox" name="shopName" onClick="swapCheck()"/></td>
				<td width="380px"><img  class="s1"src="img/6.jpg" height="50" width="50"/>
				<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.69997484m5j4Mn&id=596106537576" target="_blank">阿迪达斯官网三叶草 女子经典运动鞋 39码</a>
				<br/>
				<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/>
				</td>
				<td width="220px" ><font size="3" color="red">999</font></td>
				<td width="300px"><input type="button" value="-" name="三叶草" onClick="lowNum('三叶草');allNum();allPrice();">
				<input type="text" value="1" size="3" name="三叶草" onClick="allNum();" onChange="allPrice();">
				<input type="button" value="+" name="三叶草" onClick="plusNum('三叶草');allNum();allPrice();"></td>
				
				<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop1');allNum();allPrice();"></td>
			    <td width="300px"><input type="button" value="收藏"  ></td>
			</tr>
			
			
			
			<!-- 第二件商品 -->
			<tr id="shop2">
				<td width="85px"><input type="checkbox"  name="shopName" onClick="swapCheck()"/></td>
				<td width="380px"> <img  class="s1"src="img/7.jpg" height="50" width="50"/>
				<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.13.69997484m5j4Mn&id=584192872965" target="_blank">阿迪达斯官网 ULTRABOOST 20</a><br/>
				<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/></td>
				<td width="220px"><font size="3" color="red">899</font></td>
				<td width="300px"><input type="button" value="-" name="TRABOOST" onClick="lowNum('TRABOOST');allNum();allPrice();">
				<input type="text" value="1" size="3" name="TRABOOST" onClick="allNum();">
				<input type="button" value="+" name="TRABOOST" onClick="plusNum('TRABOOST');allNum();allPrice();"></td>
				
				<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop2');allNum();allPrice();"></td>
			    <td width="60px"><input type="button" value="收藏" ></td>
			</tr>
			
			<!-- 第三件商品 -->
			<tr id="shop3">
				<td width="85px"><input type="checkbox" name="shopName" onClick="swapCheck()"/></td>
				<td width="380px"> <img  class="s1"src="img/8.jpg" height="50" width="50"/>
				<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.22.69997484m5j4Mn&id=613075008444" target="_blank">阿迪达斯官网UltraBOOST男女跑步运动鞋</a><br/>
				<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/></td>
				<td width="220px"><font size="3" color="red">699</font></td>
				<td width="300px"><input type="button" value="-" name="UltraBOOST" onClick="lowNum('UltraBOOST');allNum();allPrice();">
				<input type="text" value="1" size="3" name="UltraBOOST" onClick="allNum();">
				<input type="button" value="+" name="UltraBOOST" onClick="plusNum('UltraBOOST');allNum();allPrice();"></td>
				
				<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop3');allNum();allPrice();"></td>
				<td width="4px"><input type="button" value="收藏" ></td>
			</tr>
			
			</table>
					
		</table>
		<!-- 结算商品 -->
		<table type="checkbox" id="check"border="0">
			<tr>
				<td width="60px"> </td>
				<td width="60px"> </td>
				<td width="60px"> </td>
				<td width="60px"> </td>
				<td width="60px"> </td>
				<td width="60px"> </td>
				<td width="60px"> </td>
			<td> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
			&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 合计（不含运费）：0元</td>	
				<td width="80px"><input type="button" class="footer"color="black" style="width: 80px; height: 35px; color:blanchedalmond;border: none;" value="结算" ></td>
				</tr>
			</table>
		
	</body>
	</html>
</html>

支付页面

支付页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付页面</title>
	</head>
	<body>
		<td width="200px">选择支付方式：</td>
		<td width="380px"><img  class="s1"src="img/9.png" height="50" width="50"/>
		<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
		<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="支付宝支付" ></a>
		<td width="380px"><img  class="s1"src="img/10.png" height="50" width="50"/>
		<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
		<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="微信支付" ></a>
		<td width="380px"><img  class="s1"src="img/11.jpg" height="50" width="50"/>
		<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
		<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="云闪付" ></a>
	</body>
</html>

支付成功页面
支付成功跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付成功页面</title>
		
	</head>
	<body>
		支付成功！三秒后跳转到购物车界面...
		
		<span style="font-size:18px;"> </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2.html"> </span>
		<span style="font-size:24px;">
	</body>
</html>

css代码块

.s1{
	max-width: 80px;
	float: left;
}
.delete{
				border: none;
				color: blue;
				background-color: white;
				width: 60px;
			}	
.footer{
	padding: 0;
	background: red;


}

1.png
1
2.png
2
3.png
3
4.png
4
5.png
5
6.jpg
6
7.jpg
7
8.jpg
在这里插入图片描述
9.png
9
10.png
10
11.jpg
11

小川呀
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
淘宝购物车界面HTML
05-30
包含淘宝购物车加减货物，清除货物，清空购物车等操作，利用js技术进行界面设计。学习HTML的典型案例，需要的朋友可以下载，里面有网页、图片等都在里面了。
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
购物车跳转到支付
gh0708的博客
12-21 692
依赖 compile 'com.squareup.okhttp3:okhttp:3.9.0' compile 'com.google.code.gson:gson:2.4' compile 'com.github.bumptech.glide:glide:3.7.0' compile 'com.squareup.okhttp3:logging-interceptor:3.
模仿淘宝网购物车纯JS实现
01-09
模仿淘宝网购物车纯JS实现，改变商品数量时，单个商品金额和购物车会跟着变动变动，支持删除。
jQuery实现类似淘宝购物车全选状态示例
12-12
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...script type=”text/javascript”
纯jquery实现模仿淘宝购物车结算
10-23
在本篇文章中，我们将探讨如何使用纯jQuery来实现一个类似淘宝购物车的结算功能。这个功能包括了全选、单选商品以及商品数量增减时总价的实时更新。以下是实现这个功能的关键步骤和代码解析： 1. **计算一行的价格*...
购物车全选实现
11-02
接下来，我们将深入探讨购物车全选实现的技术细节和实现方法。 首先，我们需要理解购物车的数据结构。通常，购物车中的每个商品都是一个对象，包含了商品ID、名称、价格、数量等属性。这些对象被存储在一个数组或...
淘宝购物车全选js
04-13
淘宝购物车全选js 1、选中所有商品-自动选中/取消全选按钮 2、选中商店-自动选中/取消公司下的所有商品； 3、全选
HTML淘宝购物车页面的实现
热门推荐
qq_46007633的博客
03-22 1万+
仿照淘宝购物车。主要包括以下知识，超级简单，没使用CSS，很多功能没有实现，只是一个仿造的购物车页面。 使用div标签，将整个页面划分为上中下相应的几个模块。 使用高级标签，包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾，对表格进行横向分组，将淘宝购物车分成相应的几部分。 列出几个小标题，比如单价、数量、金额、操作等。 根据确定的列，使用相应的图像标签、超链接、表单域等
原生JS淘宝购物车页面
04-25
用原生JS实现淘宝购物车的页面，实现增删改查的功能。
实现购物车单品加减，删除，单选，全选
09-29
这个是单独只有商品的购物车 实现了 1：左滑删除功能 2：全选 单选功能 3：本地更改加减数量功能
仿购物车功能（添加、删除、结算、单选、全选商品等功能）
08-01
仿购物车功能（添加、删除、结算、单选、全选商品等功能）。运用到接口回调，bean绑定tag。
jQuery淘宝购物车页面商品结算
05-18
完美模仿淘宝购物车界面， jQuery淘宝购物车页面商品结算
Javascript网页编程技术购物车的修改
05-17
Javascript网页编程技术购物车的修改
淘宝购物车前端（JS和Angularjs版本)
漫长学习路
09-15 8650
今天用HTML和JS实现以下购物车，然后再用Angualrjs加bootstrap再去实现一下购物车的前端实现。功能页面分析：既然是做模仿淘宝购物车，肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西，看了下效果；首先有一个全选功能，全选的时候会把所有的单选框给选中，并且会把所有的金额进行统计。商品店铺的单选功能：在选择店铺的时候会把下面的商品全部都给选中，并且统计已经勾选的金额。商品单选
关于淘宝购物车的界面搭建
dangpf520的博客
02-19 1257
电商类的都可能会用到购物车，这篇博客就是关于购物车的搭建问题， 首先购物车的展示tableViewCell 、编辑购物车、删除购物车里面的商品、以及选择商品的结算问题， 主要的核心问题就是每次添加商品后都要计算一次商品总价。。。。 话不多说，直接看代码， 因为是自己写demo 所以 我们要自己构建数据： 我们的数据里面主要包含了：（商品的名称、价格和图片，三个信息） for (int
小程序购物车增加数量计算价格全选删除
weixin_51110842的博客
10-12 323
购物车h5页面 <view a:if="{{slideProductList.length!==0}}" class="hears"> <!-- 购物车开始 --> <view class="hear"> <view class="hear-choice"> <view class="hears-choice" style="display:flex;align-items:center;"> <
使用（html+css+angularjs）实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示
weixin_43748615的博客
02-14 1486
需求： 要求：技术要求（html+css+angularjs） 完成页面布局，如图1.1（button按钮可以用普通按钮） 2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条 用ng-repaet指令将对象遍历并渲染到页面中 4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。在输入框中...
微信小程序购物车全选按钮结算
最新发布
05-25
实现微信小程序购物车全选按钮结算，需要以下步骤： 1. 在购物车页面中，为每个商品添加一个复选框，同时在页面顶部或底部添加一个全选复选框。 2. 给每个商品复选框绑定点击事件，当用户点击时，记录商品的选中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值