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

最新推荐文章于 2024-03-15 15:44:38 发布
置顶 最新推荐文章于 2024-03-15 15:44:38 发布
阅读量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淘宝购物车页面商品结算
淘宝购物车前端（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，商品小计和购物车总价都会改变。在输入框中...
淘宝/天猫获取购物车的商品列表 API接口，抓取淘宝商品
最新发布
API_18870278351的博客
03-15 981
淘宝和天猫平台对于获取购物车商品列表并没有提供直接的API接口供第三方开发者使用。购物车的商品列表属于用户的个人隐私信息，因此平台通常会严格保护这部分数据，不允许通过API直接获取。在正常的用户操作流程中，用户可以通过淘宝或天猫的官方应用或网站查看和管理自己的购物车商品列表。这些应用或网站会与淘宝/天猫的服务器进行交互，以展示购物车中的商品信息。请求URL地址：o0b.cn/imike首先，您需要引导用户登录淘宝或天猫账号，并获取用户的授权。
微信小程序购物车全选按钮结算
05-25
实现微信小程序购物车全选按钮结算，需要以下步骤： 1. 在购物车页面中，为每个商品添加一个复选框，同时在页面顶部或底部添加一个全选复选框。 2. 给每个商品复选框绑定点击事件，当用户点击时，记录商品的选中状态。 3. 给全选复选框绑定点击事件，当用户点击时，遍历所有商品的复选框，根据全选复选框的选中状态，设置商品复选框的状态。 4. 在页面底部添加结算按钮，当用户点击时，遍历所有商品，根据商品复选框的状态，计算选中商品的总价和数量，然后跳转到结算页面。 以下是一个示例代码： ``` <view class="cart"> <view class="cart-header"> <checkbox class="select-all" bindchange="selectAll">全选</checkbox> <view class="cart-header-text">购物车</view> </view> <view class="cart-items"> <block wx:for="{{items}}" wx:key="id"> <view class="cart-item"> <checkbox class="cart-item-checkbox" value="{{item.selected}}" bindchange="selectItem" data-id="{{item.id}}"></checkbox> <image class="cart-item-image" src="{{item.image}}"></image> <view class="cart-item-name">{{item.name}}</view> <view class="cart-item-price">¥{{item.price}}</view> </view> </block> </view> <view class="cart-footer"> <view class="cart-footer-total">合计：¥{{totalPrice}}</view> <button class="cart-footer-button" bindtap="checkout">结算({{selectedCount}})</button> </view> </view> <script> Page({ data: { items: [ { id: 1, name: '商品1', image: 'image1.jpg', price: 10, selected: false }, { id: 2, name: '商品2', image: 'image2.jpg', price: 20, selected: false }, { id: 3, name: '商品3', image: 'image3.jpg', price: 30, selected: false } ] }, selectAll: function(event) { var selected = event.detail.value; var items = this.data.items; for (var i = 0; i < items.length; i++) { items[i].selected = selected; } this.setData({ items: items }); }, selectItem: function(event) { var id = event.currentTarget.dataset.id; var items = this.data.items; for (var i = 0; i < items.length; i++) { if (items[i].id == id) { items[i].selected = event.detail.value; break; } } this.setData({ items: items }); }, checkout: function() { var items = this.data.items; var totalPrice = 0; var selectedCount = 0; for (var i = 0; i < items.length; i++) { if (items[i].selected) { totalPrice += items[i].price; selectedCount++; } } wx.navigateTo({ url: '/pages/checkout/checkout?totalPrice=' + totalPrice + '&selectedCount=' + selectedCount }); } }); </script> ``` 在上述代码中，我们给每个商品复选框绑定了 `selectItem` 事件，全选复选框绑定了 `selectAll` 事件，结算按钮绑定了 `checkout` 事件。事件处理函数中，我们通过遍历商品列表来计算选中商品的总价和数量，并跳转到结算页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值