博客

jQuery 购物车功能

  • Post author:
  • Post category:其他




简单版原生jQuery购物车

在制作购物车时，为了方便我们阅读、修改、制作，我们就要把这个项目分为三个部分进行分离：html + css + js


html：
 

<body>
		<div class="container-fluid logo">
			<img class="img-responsive" src="img/taobao_logo.gif" />
		</div>
		<div class="container-fluid nav">
			您的位置：
			<a href="#">首页</a>&gt;
			<a href="#">我的淘宝</a>&gt; 我的购物车
		</div>
		<div id="navlist">
			<ul>
				<li class="navlist_red_left"></li>
				<li class="navlist_red">1. 查看购物车</li>
				<li class="navlist_red_arrow"></li>
				<li class="navlist_gray">2. 确认订单信息</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">3. 付款到支付宝</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">4. 确认收货</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">5. 评价</li>
				<li class="navlist_gray_right"></li>
			</ul>
		</div>
		<ul class="container-fluid check">
			<li style="height: 45px;">
				<td>
					<input type="checkbox" id="all" value="全选" onclick="check()" /> 全选
				</td>
				<td class="title_1" colspan="1">店铺宝贝</td>
				<td class="title_2">单价（元）</td>
				<td class="title_3">数量</td>
				<td class="title_4">小计（元）</td>
				<td class="title_5">操作</td>
			</li>
			<li id="commodity">
				<div class="col-lg-1">
					<input type="checkbox" value="1" name="product" />
				</div>
				<div class="col-lg-2">
					<img class="img-responsive" src="img/taobao_cart_01.jpg" />
				</div>
				<div class="col-lg-2">
					<input type="text" id="cost" value="138.00" />
				</div>
				<div class="col-lg-2">
					<button id="minus" class="col-lg-2" name="-">-</button>
					<input id="num_1" type="text" value="1" class="col-lg-8 num_input" readonly="readonly" />
					<button id="add" class="col-lg-2">+</button>
				</div>
				<div class="col-lg-2">
					<input type="text" id="price" value="" style="text-align: center;" />
				</div>
				<div class="col-lg-2">
					<button id="delete" onclick="delete()">删除</button>
				</div>
			</li>
			<li id="commoditys">
				<div class="col-lg-1">
					<input type="checkbox" value="2" name="product" />
				</div>
				<div class="col-lg-2">
					<img class="img-responsive" src="img/taobao_cart_02.jpg" />
				</div>
				<div class="col-lg-2">
					<input type="text" id="costs" value="265.00" />
				</div>
				<div class="col-lg-2">
					<button id="minuss" class="col-lg-2" name="-">-</button>
					<input id="num_1s" type="text" value="1" class="col-lg-8 num_input" readonly="readonly" />
					<button id="adds" class="col-lg-2">+</button>
				</div>
				<div class="col-lg-2">
					<input type="text" id="prices" value="" style="text-align: center;" />
				</div>
				<div class="col-lg-2">
					<button id="deletes" onclick="delete()">删除</button>
				</div>
			</li>
			<li id="commodityes">
				<div class="col-lg-1">
					<input type="checkbox" value="3" name="product" />
				</div>
				<div class="col-lg-2">
					<img class="img-responsive" src="img/taobao_cart_03.jpg" />
				</div>
				<div class="col-lg-2">
					<input type="text" id="costes" value="85.00" />
				</div>
				<div class="col-lg-2">
					<button id="minuses" class="col-lg-2" name="-">-</button>
					<input id="num_1es" type="text" value="1" class="col-lg-8 num_input" readonly="readonly" />
					<button id="addes" class="col-lg-2">+</button>
				</div>
				<div class="col-lg-2">
					<input type="text" id="pricees" value="" style="text-align: center;" />
				</div>
				<div class="col-lg-2">
					<button id="deletees" onclick="delete()">删除</button>
				</div>
			</li>
			<li>
				<div colspan="3">
					<a id="deleteAll" href="javascript:void(0);">
						<img src="img/taobao_del.jpg" alt="delete" />
					</a>
				</div>
				<div colspan="5" class="shopend">商品总价（不含运费）：
				<label id="total" class="yellow"></label> 元<br />
				</div>
			</li>
		</ul>
	</body>


css：
 

* {
		padding: 0;
		margin: 0;
	}
	li {
		list-style: none;
	}
	.check li {
		list-style: none;
		height: 60px;
		background-color: #e2f2ff;
		height: 100px;
		line-height: 50px;
		margin-top: 10px;
	}
	#navlist {
		width: 800px;
		/*margin: 0px auto 0px auto;*/
		height: 23px;
	}
	#navlist ul li {
		float: left;
		height: 23px;
		line-height: 26px;
	}
	.navlist_red_left {
		background-image: url(../images/taobao_bg.png);
		background-repeat: no-repeat;
		background-position: -12px -92px;
		width: 3px;
	}
	.navlist_red {
		background-color: #ff6600;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #FFF;
		width: 130px;
	}
	.navlist_red_arrow {
		background-color: #ff6600;
		background-image: url(../images/taobao_bg.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		width: 13px;
	}
	.navlist_gray {
		background-color: #e4e4e4;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		width: 150px;
	}
	.navlist_gray_arrow {
		background-color: #e4e4e4;
		background-image: url(../images/taobao_bg.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		width: 13px;
	}
	.navlist_gray_right {
		background-image: url(../images/taobao_bg.png);
		background-repeat: no-repeat;
		background-position: -12px -138px;
		width: 3px;
	}
	.num_input {
		border: solid 1px #666;
		width: 50px;
		height: 25px;
		text-align: center;
	}
	#delete,#deletes,#deletees {
		width: 90px;
		height: 56px;
		border-radius: 5px;
		border: 1px solid;
	}


js:
 

$(function() {
	//商品靴子数量增加
	$("#add").click(function() {
		//获取默认值1
		var old = $("#num_1").val();
		//每点击按钮一次，数量就会每次加以，比如：2+1=3,3+1=4
		var newz = parseInt(old) + 1;
		//每次加1得到的值输出到框内
		$("#num_1").val(newz);
		//商品小计,商品数量减少，价格随之减少
		//获取商品单价价格
		var price = $("#cost").val();
		//获取商品数量
		var num = $("#num_1").val();
		//获取口红价格
		var lipstick = $("#prices").val();
		//获取化妆品价格
		var makeup = $("#pricees").val();
		//靴子总价=单价*数量
		var sum = price * num;
		//全部商品总价
		var sums = parseInt(lipstick) + parseInt(makeup) + parseInt(sum);
		//在ID为price的input框输出显示靴子最终价格
		$("#price").val(sum);
		//输出显示全部商品总价格
		$("#total").html(sums);
		
	});
	//商品数量减少
	$("#minus").click(function() {
		var old = $("#num_1").val();
		var newz = parseInt(old) - 1;
		//判断商品熟练不能小于1
		if(newz < 1) {
			alert("商品数量不能小于1件！")
		} else {
			$("#num_1").val(newz);
		}
		//商品小计，商品数量增加，价格随之增加
		//获取商品单价价格
		var price = $("#cost").val();
		//获取商品数量
		var num = $("#num_1").val();
		//总价=单价*数量
		var sum = price * num;
		//获取口红价格
		var lipstick = $("#prices").val();
		//获取化妆品价格
		var makeup = $("#pricees").val();
		//全部商品总价
		var sums = parseInt(lipstick) + parseInt(makeup) + parseInt(sum);
		//在ID为price的input框输出显示最终价格
		$("#price").val(sum);
		$("#total").html(sums);
	});
	//删除商品
	$('#delete').click(function() {
		$("#commodity").remove();
		//获取口红价格
		var lipstick = $("#prices").val();
		//获取化妆品价格
		var makeup = $("#pricees").val();
		var sums = parseInt(lipstick) + parseInt(makeup);
		$("#total").html(sums);
	});

	//商品口红数量增加
	$("#adds").click(function() {
		var old = $("#num_1s").val();
		var newz = parseInt(old) + 1;
		$("#num_1s").val(newz);
		//商品小计,商品数量减少，价格随之减少
		//获取商品单价价格
		var price = $("#costs").val();
		//获取商品数量
		var num = $("#num_1s").val();
		//获取靴子价格
		var boot = $("#price").val();
		//获取化妆品价格
		var makeup = $("#pricees").val();
		//总价=单价*数量
		var sum = price * num;
		//全部商品总价
		var sums = parseInt(boot) + parseInt(makeup) + parseInt(sum);
		//在ID为price的input框输出显示最终价格
		$("#prices").val(sum);
		$("#total").html(sums);
	});
	//商品数量减少
	$("#minuss").click(function() {
		var old = $("#num_1s").val();
		var newz = parseInt(old) - 1;
		//判断商品熟练不能小于1
		if(newz < 1) {
			alert("商品数量不能小于1件！")
		} else {
			$("#num_1s").val(newz);
		}
		//商品小计，商品数量增加，价格随之增加
		//获取商品单价价格
		var price = $("#costs").val();
		//获取商品数量
		var num = $("#num_1s").val();
		//获取靴子价格
		var boot = $("#price").val();
		//获取化妆品价格
		var makeup = $("#pricees").val();
		//总价=单价*数量
		var sum = price * num;
		//全部商品总价
		var sums = parseInt(boot) + parseInt(makeup) + parseInt(sum);
		//在ID为price的input框输出显示最终价格
		$("#prices").val(sum);
		$("#total").html(sums);
	});
	//删除商品
	$('#deletes').click(function() {
		$("#commoditys").remove();
	});

	商品化妆品数量增加
	$("#addes").click(function() {
		var old = $("#num_1es").val();
		var newz = parseInt(old) + 1;
		$("#num_1es").val(newz);
		//商品小计,商品数量减少，价格随之减少
		//获取商品单价价格
		var price = $("#costes").val();
		//获取商品数量
		var num = $("#num_1es").val();
		//总价=单价*数量
		var sum = price * num;
		var boot = $("#price").val();
		var lipstick = $("#prices").val();
		var sums = parseInt(sum) + parseInt(boot) + parseInt(lipstick);
		//在ID为price的input框输出显示最终价格
		$("#pricees").val(sum);
		$("#total").html(sums);
	});
	//商品数量减少
	$("#minuses").click(function() {
		var old = $("#num_1es").val();
		var newz = parseInt(old) - 1;
		//判断商品熟练不能小于1
		if(newz < 1) {
			alert("商品数量不能小于1件！")
		} else {
			$("#num_1es").val(newz);
		}
		//商品小计，商品数量增加，价格随之增加
		//获取商品单价价格
		var price = $("#costes").val();
		//获取商品数量
		var num = $("#num_1es").val();
		//总价=单价*数量
		var sum = price * num;
		var boot = $("#price").val();
		var lipstick = $("#prices").val();
		var sums = parseInt(sum) + parseInt(boot) + parseInt(lipstick);
		//在ID为price的input框输出显示最终价格
		$("#pricees").val(sum);
		$("#total").html(sums);
	});
	//删除商品
	$('#deletees').click(function() {
		$("#commodityes").remove();
	});

	//全选按钮
	$("#all").click(function() {
		var oInput = document.getElementsByName("product");
		for(var i = 0; i < oInput.length; i++) {
			oInput[i].checked = document.getElementById("all").checked;
		}
		//获取三件商品的价格
		var boot = $("#price").val();
		var lipstick = $("#prices").val();
		var makeup = $("#pricees").val();
		//结算价钱 = 三件商品的价格总和
		var sum = parseInt(boot) + parseInt(lipstick) + parseInt(makeup);
		//在id位total的input框内显示总价格
		$("#total").html(sum);
		//点击删除按钮，删除元素
		$("#deleteAll").click(function(){
			$("#commodity,#commoditys,#commodityes").remove();
			var sum = 0;
			$("#total").html(sum);
		});
	});
});


效果图：


在这里插入图片描述



项目分析

上图我们看到商品有3个，其实功能都是一样的，我们只要做出其中一个商品的功能，其他的也都粗来了。下面就来进行这个购物车的功能分析！



商品数量：


+ 按钮

商品数量最低数是1件，不可能低于1，所以在数量容器中的value默认值，我们设置为value=“1”，我们给按钮设置一个onclick点击事件，在触发事件我们执行下面的内容。当每点击一次 + 时，商品数量就会每次加1。最后把每次原本数量加1的值以数字类型输出到框内。 

		//获取默认值1
		var old = $("#num_1").val();
		//每点击按钮一次，数量就会每次加以，比如：2+1=3,3+1=4
		var newz = parseInt(old) + 1;
		//每次加1得到的值输出到框内
		$("#num_1").val(newz);


– 按钮

实现思路与数量增加的思路相反，唯一不同的是商品数量不能为负数，这事我们就要进行一个判断来提醒用户数量不能为负数，我写的判断最后输出的是弹出一个弹框提醒用户。废话少说直接上代码： 

		var old = $("#num_1").val();
		//商品数量每次减1
		var newz = parseInt(old) - 1;
		//判断商品熟练不能小于1
		if(newz < 1) {
			alert("商品数量不能小于1件！")
		} else {
			$("#num_1").val(newz);
		}



价格显示：


价格增加：

学过数学的都知道 商品的总价 = 单价 * 数量，代码实现思路也是一样。我们先获取商品的单价和商品的数量，最后根据公式

总价 = 单价 * 数量

就会得出总价格，最后的最后我们再把价格输出到总价的框内。 

		//获取商品单价价格
		var price = $("#cost").val();
		//获取商品数量
		var num = $("#num_1").val();
		//在ID为price的input框输出显示靴子最终价格
		$("#price").val(sum);


价格减少：

根据价格增加的实现思路也就会实现。获取减少的数量，其次获取单价，再根据公式就可以得到总价，最后再进行价格的输出。


总结：

购物的实现思路大致就是这样，得到和输出，小伙伴们在制作之前先把思路捋清楚再进行功能的制作。


知识点：

parseInt（）是一个函数，它可解析一个字符串，并返回一个整数。下面的小例子可以让你了解该函数的作用： 

<body>

<script>
document.write(parseInt("10") + "<br>") ;
document.write(parseInt("10.33") + "<br>");
document.write(parseInt("34 45 66") + "<br>");
document.write(parseInt(" 60 ") + "<br>");
document.write(parseInt("40 years") + "<br>");
document.write(parseInt("He was 40") + "<br>");
document.write("<br>");
document.write(parseInt("10",10)+ "<br>");
document.write(parseInt("010")+ "<br>");
document.write(parseInt("10",8)+ "<br>");
document.write(parseInt("0x10")+ "<br>");
document.write(parseInt("10",16)+ "<br>");
</script>

</body>

运行结果： 

10
10
34
60
40
NaN

10
10
8
16
16


版权声明：本文为zhang79513原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。