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 版权协议,转载请附上原文出处链接和本声明。