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

购物车页面
结构
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
    评论
实现微信小程序购物车全选按钮结算,需要以下步骤: 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、付费专栏及课程。

余额充值