关于js的购物车代码

╰+哭是因爲堅強的太久メ 2022-08-28 14:52 174阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
    		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="" class="cart">
    			<form action="cart.html" method="post">
    			<table width="1000" border="0" cellspacing="0" cellpadding="0">
    				<thead>
    				<tr><th width="100px">
    				<input type="checkbox" id="checkAll" />全选</th>
    				<th width="150px">图片</th>
    				<th width="200px">名称</th>
    				<th width="100px">价格</th>
    				<th width="150px">数量</th>
    				<th width="100px">小计</th>
    				<th width="100px">操作</th>
    				</tr>
    				</thead>
    				<tbody class="tbody">
    					<tr class="empty">
    						<td colspan="7">你的购物车里空空如也~，快去<a href="index.html">shopping</a>吧</td>
    					</tr>
    					<tr>
    						<td><input type="checkbox" name="ck" id="" value="" /></td>
    						<td><img src="img/qEAJBBKINn6FAnZ8CwfyiK4w2DEgADs=.gif" ></td>
    						<td><a href="#">大昏君</a></td>
    						<td>998</td>
    						<td>
    							<button type="button" class="jian">-</button>
    						<input type="text" name="num" value="1" class="num" readonly="readonly" />
    						<button type="button" class="jia">+</button>
    						</td>
    						<td>998</td>
    						<td class="del"><a href="javascript:void(0);" class="del">删除</a></td>
    					</tr>
    					<tr>
    						<td><input type="checkbox" name="ck" id="" value="" /></td>
    						<td><img src="img/QQ图片20210914201503.jpg" ></td>
    						<td><a href="#">夜游神</a></td>
    						<td>998</td>
    						<td><button type="button" class="jian">-</button>
    						<input type="text" name="num" value="1" readonly="readonly" class="num" />
    						<button type="button" class="jia">+</button>
    						</td>
    						<td>10</td>
    						<td><a href="javascript:void(0);" class="del">删除</a></td>
    					</tr>
    					<tr>
    						<td><input type="checkbox" name="ck" id="" value="" /></td>
    						<td><img src="img/QQ图片20210914201548.gif" ></td>
    						<td><a href="#">大学渣</a></td>
    						<td>998</td>
    						<td>
    							<button type="button" class="jian">-</button>
    						<input type="text" name="num" value="1" class="num" readonly="readonly" />
    						<button type="button" class="jia">+</button>
    						</td>
    						<td>998</td>
    						<td><a href="javascript:void(0);" class="del">删除</a></td>
    					</tr>
    				</tbody>
    				<tfoot>
    					<tr class="footer">
    						<td colspan="3"><a href="javascript:void(0)" class="dels">批量删除</a> </td>
    						<td>总金额</td>
    						<td><span id="total" class="">
    							0
    						</span>元</td>
    						<td><button type="image" class="submit">提交订单</button></td>
    					</tr>
    				</tfoot>
    				
    			</table>
    		</div>
    	</body>
    </html>

关于css的

.cart {
        
    	width: 900px;
    	margin: 5px auto;
    }
    
    .cart>table {
        
    	width: 100%;
    }
    
    tbody {
        
    	width: 900px;
    }
    
    .cart img {
        
    	width: 144px;
    	height: 144px;
    	margin: 3px;
    }
    
    td {
        
    	text-align: center;
    	height: 150px;
    }
    
    .num {
        
    	width: 25px;
    	text-align: center;
    }
    
    .footer td,
    th {
        
    	height: 50px !important;
    }
    
    td,
    th {
        
    	border-bottom: 0.0625rem #ccc solid !important;
    }
    
    thead {
        
    	background-color: #CCCCCC;
    }
    
    table {
        
    	border: 1px #ccc solid !important;
    }
    
    #total {
        
    	color: red;
    }
    
    .empty {
        
    	display: none;
    }

js文件

$(function() {
        
    			//删除功能
    			$(".del").on("click", function() {
        
    						if (confirm("确定要删除吗? ")) {
        
    							$(this).parents("tr").remove();
    							}
    							isAll();
    							//删除之后判断购物车是否空了
    							has();
    						})
    					//批量删除
    					$(".dels").on("click", function() {
        
    							if (confirm("确定要删除吗? ")) {
        
    								$(" input[name=ck]").each(function(i,ch){
        
    										if ($(ch).prop("checked")){
        
    											$(this).parents("tr").remove();
    											calculation()
    											}
    										})
    							}
    										isAll();
    									//删除之后判断购物车是否空了
    									has();
    								})
    							//全选功能
    							$("#checkAll").on("click", function(){
        
    								//先获取全选按钮的状态
    								var flag = $(this).prop("checked");
    								//根据全选按钮的状态设置商品选项的状态
    								$("input[name=ck]").prop("checked",flag);
    								calculation()
    							})
    							//商品选择按钮的功能
    							$("input[name=ck]").on("click", isAll)
    
    							function isAll() {
        
    								//设置全选状态，默认为true
    								var flag = true;
    								//遍历所有商品选择按钮的状态，如果有一个是没选中的，
    								//就设置全选按钮的状态为false
    								$("input[name=ck]").each(function(i, ch) {
        
    									if (!$(ch).prop("checked")){
        
    										flag = false;
    									}
    								})
    								//没有商品的时候，修改全选状态非false
    								if ($(".tbody tr").length <= 1){
        
    									flag = false;
    								}
    								$("#checkAll").prop("checked", flag)
    								calculation()
    							}
    							//数量加
    							$(".jia").on("click", function(){
        
    								//获取数量元素
    								var $num = $(this).prev();
    								//获取数量的值
    								var v = $num.val();
    								//自增
    								v++;
    								//重新设置数量的值
    								$num.val(v)
    								//获取当前商品的单价
    								var price = $(this).parent().prev().text();
    								//计算小计金额
    								var sum = price * v;
    								//设置小计金额
    								$(this).parent().next().text(sum.toFixed(2));
    								calculation();
    							})
    							//数量减
    							$(".jian").on("click", function() {
        
    									var $num = $(this).next();
    									var v = $num.val();
    									//自减
    									v--;
    									//判断数量范围，最小为1
    									if (v < 1) {
        
    										v = 1;
    										}
    										$num.val(v)
    										//获取当前商品的单价
    										var price=$(this).parent().prev().text();
    										//计算小计金额
    										var sum=price*v;
    										//设置小计金额
    										$(this).parent().next().text(sum.toFixed(2));
    										calculation()
    									})
    								//计算总金额
    								function calculation() {
        
    									var total = 0;
    									//总金额跟商品是否被选中有关联
    									//遍历所有选择按钮，查石状态是否被选中
    									$("input[name=ck]").each(function(i, ck) {
        
    										if ($(ck).prop("checked")) {
        
    											//如果被选中，获取相应的小计的值
    											var sj = $(ck).parents("tr").find("td").eq(5).text()
    											// alert(sj);
    											total += parseFloat(sj);
    											// alert(total);
    										}
    									})
    									$("#total").text(total.toFixed(2))
    								}
    								//判断购物车中是否有商品
    								function has(){
        
    									if($(".tbody tr").length > 1){
        
    										$(".empty").hide();
    										$("#checkA11").prop("disabled",false);
    									}else{
        
    										$(".empty").show();
    										$("#checkA11").prop("disabled",true)
    									}
    								}
    								//页面加载完，先判断是否有商品
    								has();
    							})

图片自选，jquer文件我上传的资源有。  
以下为结果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2lzc19zY2FyZWNyb3c_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2lzc19zY2FyZWNyb3c_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bc9d26e63d2742788aca68bad2024cb3.png