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实现购物车功能</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特效制作复选框全选反选取消(无插件)
// 全选
$(".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();
});
// 所有复选(: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();
});
});
//获取数量
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 四舍五入为指定小数位数的数字。
$("#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">数量</td>
<td class="tb1_td6">单价</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<!---商品加减算总数---->
<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="#">产品标题</a></td>
<td class="tb1_td4">产品介绍</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>
<!---商品加减算总数---->
<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="#">产品标题</a></td>
<td class="tb1_td4">产品介绍</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>
<!---总数---->
<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">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</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>