jQuery develops shopping cart function to implement complete code
In the previous chapter we created a simple shopping cart page,
Introduced the reference to external jQuery library and external javascript file
This section will fully display the shopping cart code to achieve complete function.
First we can put the previous css style into an index.css file
<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微軟雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}
/*****購物車*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}
.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}
.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
@media only screen and (min-width: 410px){
div{
margin: auto;
}
}
</style>Then we can use link to reference the index.css file in <head>:
<link href="css/index.css" rel="stylesheet" type="text/css" />
The complete shopping cart function code is shown below. Here we directly paste the css style code to intuitively reflect the effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實現(xiàn)購物車功能</title>
<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微軟雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}
/*****購物車*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}
.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}
.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
@media only screen and (min-width: 410px){
div{
margin: auto;
}
}
</style>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Calculation.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//jquery特效制作復(fù)選框全選反選取消(無插件)
// 全選
$(".allselect").click(function () {
if(this.checked){
$(".gwc_tb2 input[name=newslist]").prop("checked",true);
} else{
$(".gwc_tb2 input[name=newslist]").prop("checked",false);
$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
}
GetCount();
});
//反選
$("#invert").click(function () {
$(".gwc_tb2 input[name=newslist]").each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
} else {
$(this).prop("checked", true);
$(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
}
});
GetCount();
});
//取消
$("#cancel").click(function () {
$(".gwc_tb2 input[name=newslist]").each(function () {
$(this).prop("checked", false);
$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
});
GetCount();
});
// 所有復(fù)選(:checkbox)框點擊事件
$(".gwc_tb2 input[name=newslist]").click(function () {
if ($(this).prop("checked")) {
$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
} else {
$(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
}
});
// 輸出
$(".gwc_tb2 input[name=newslist]").click(function () {
GetCount();
});
});
//獲取數(shù)量
function GetCount() {
var conts = 0;
var aa = 0;
$(".gwc_tb2 input[name=newslist]").each(function () {
if ($(this).prop("checked")) {
for (var i = 0; i < $(this).length; i++) {
conts += parseInt($(this).val());
aa += 1;
}
}
});
$("#shuliang").text(aa);
$("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字。
$("#jz1").css("display", "none");
$("#jz2").css("display", "block");
}
</script>
</head>
<body>
<div class="gwc" style=" margin:auto;">
<table cellpadding="0" cellspacing="0" class="gwc_tb1">
<tr>
<td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
<td class="tb1_td1">全選</td>
<td class="tb1_td3">商品</td>
<td class="tb1_td4">商品信息</td>
<td class="tb1_td5">數(shù)量</td>
<td class="tb1_td6">單價</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<!---商品加減算總數(shù)---->
<script type="text/javascript">
$(function () {
var t = $("#text_box1");
$("#add1").click(function () {
t.val(parseInt(t.val()) + 1);
setTotal(); GetCount();
});
$("#min1").click(function () {
if(parseInt(t.val() - 1) < 0){
return false;
}else {
t.val(parseInt(t.val()) - 1);
}
setTotal(); GetCount();
});
function setTotal() {
$("#total1").html((parseInt(t.val()) * 9).toFixed(2));
$("#newslist-1").val(parseInt(t.val()) * 9);
}
setTotal();
})
</script>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min1" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add1" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<!---商品加減算總數(shù)---->
<script type="text/javascript">
$(function () {
var t = $("#text_box2");
$("#add2").click(function () {
t.val(parseInt(t.val()) + 1);
setTotal(); GetCount();
});
$("#min2").click(function () {
if(parseInt(t.val() - 1) < 0){
return false;
}else {
t.val(parseInt(t.val()) - 1);
}
setTotal(); GetCount();
});
function setTotal() {
$("#total2").html((parseInt(t.val()) * 8).toFixed(2));
$("#newslist-2").val(parseInt(t.val()) * 8);
}
setTotal();
})
</script>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min2" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add2" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<!---總數(shù)---->
<script type="text/javascript">
$(function () {
$(".quanxun").click(function () {
setTotal();
//alert($(lens[0]).text());
});
function setTotal() {
var len = $(".tot");
var num = 0;
for (var i = 0; i < len.length; i++) {
num = parseInt(num) + parseInt($(len[i]).text());
}
//alert(len.length);
$("#zong1").text(parseInt(num).toFixed(2));
$("#shuliang").text(len.length);
}
//setTotal();
})
</script>
<table cellpadding="0" cellspacing="0" class="gwc_tb3">
<tr>
<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
<td class="tb1_td1">全選</td>
<td class="tb3_td1">
<input id="invert" type="checkbox" />反選
<input id="cancel" type="checkbox" />取消
</td>
<td class="tb3_td2">已選商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
<td class="tb3_td3">合計(不含運費):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td>
<td class="tb3_td4"><span id="jz1">結(jié)算</span><a href="#" style=" display:none;" class="jz2" id="jz2">結(jié)算</a></td>
</tr>
</table>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
