前端实战——实现购物车功能
·
文章目录
天猫实战——实现最全购物车功能
学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到github。
地址：https://github.com/qiaoj-ka
以下是对于购物车页面，以及一些交互。
页面展示
这是我完成之后的页面。
更多代码请在github上查看。https://github.com/qiaoj-ka
核心代码块
置顶导航
置顶导航使用纯CSS和HTML做的以及部分BootStrap。
<!-- 置顶导航-->
<nav class="top">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>瞄，欢迎来天猫</span>
<a href="file:///C:/Users/%E8%A5%BF%E7%93%9C/Workspaces/MyEclipse%20CI/Tmall/TmallLogin.html">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="file:///C:/Users/%E8%A5%BF%E7%93%9C/Workspaces/MyEclipse%20CI/Tmall/ShoppingCart.html">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>2</strong>件</a>
</span>
</nav>
<!-- CSS样式-->
<style>
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
产品列表
HTML部分
<div class="cartTitle pull-right">
<span>已选商品 (不含运费)</span>
<span id="cartTitlePrice" class="cartTitlePrice">￥0.00</span>
<button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button>
</div>
<div class="cartProductList">
<table class="cartProductTable">
<thead>
<tr>
<th class="selectAndImage">
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
全选
</th>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th width="120px">金额</th>
<th class="operation">操作</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<div class="shopId"><img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
<img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1919701784.jpg" width="30" height="20">
<a href="#nowhere">店铺：华为官方旗舰店</a>
</div>
</td>
</tr>
<tr class="cartProductItemTR" oiid="936">
<td>
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
<a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a>
<img src="https://img.alicdn.com/bao/uploaded/i4/TB1yVcUNQPoK1RjSZKbytX1IXXa_112407.jpg_80x80.jpg" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">【12期免息】Huawei/华为P30 Pro曲面屏超感光徕卡四摄变焦双景录像980智能手机</a>
<div>
<img src="https://gw.alicdn.com/tfs/TB1XY8mheH2gK0jSZFEXXcqMpXa-63-16.png">
</div>
<div class="cartProductLinkInnerDiv">
<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemPromotionPrice">￥4988.00</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="365" class="hidden orderItemStock ">75</span>
<span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
<a href="#nowhere" class="numberMinus" pid="365">-</a>
<input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
<a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
</div>
</td>
<td>
<span pid="365" oiid="936" id="cartProductItemSmallSumPrice" class="cartProductItemSmallSumPrice">
￥4988.00
</span>
</td>
<td>
<a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
</td>
</tr>
<tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);">
<td>
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
<a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a>
<img src="https://img.alicdn.com/bao/uploaded/i2/279470743/O1CN01UTTklQ1HMKmu9Xpuw_!!0-item_pic.jpg_80x80.jpg" class="cartProductImg">
</td>
<td>
<div class="cartProductLinkOutDiv">
<a class="cartProductLink" href="#nowhere">正版 C++游戏编程入门(第4版)c++游戏编程语言c语言编程教程 c++游戏编程从入门到精通 程序设计教材 计算机教材</a>
<div class="cartProductLinkInnerDiv">
<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
</div>
</div>
</td>
<td>
<span class="cartProductItemOringalPrice">￥59.48</span>
<span class="cartProductItemPromotionPrice">￥43.80</span>
</td>
<td>
<div class="cartProductChangeNumberDiv">
<span pid="809" class="hidden orderItemStock ">17</span>
<span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
<a href="#nowhere" class="numberMinus" pid="809">-</a>
<input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
<a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
</div>
</td>
<td>
<span pid="809" oiid="935" id="cartProductItemSmallSumPrice" class="cartProductItemSmallSumPrice">
￥152.75
</span>
</td>
<td>
<a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cartFoot">
<img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
<span>全选</span>
<!-- <a href="#">删除</a> -->
<div class="pull-right">
<span>已选商品 <span id="cartSumNumber" class="cartSumNumber">0</span> 件</span>
<span>合计 (不含运费): </span>
<span id="cartSumPrice" class="cartSumPrice">￥0.00</span>
<button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button>
</div>
</div>
CSS部分
在这里插入代码片
img.cartProductItemIfSelected, img.selectAllItem {
cursor: pointer;
}
tr.cartProductItemTR {
border: 1px solid #CCCCCC;
}
div.cartProductChangeNumberDiv {
border: solid 1px #E5E5E5;
width: 80px;
}
table.cartProductTable {
width: 100%;
font-size:12px;
}
span.cartProductItemOringalPrice {
text-decoration: line-through;
color: #9C9C9C;
display: block;
font-weight: bold;
font-size: 14px;
}
div.cartProductChangeNumberDiv input {
border: solid 1px #AAAAAA;
width: 42px;
display: inline-block;
}
div.cartProductChangeNumberDiv a {
text-decoration: none;
}
img.cartProductImg {
padding: 1px;
border: 1px solid #EEEEEE;
width: 80px;
height: 80px;
}
a.cartProductLink {
color: #3C3C3C;
}
a.cartProductLink:hover {
color: #C40000;
text-decoration: underline;
}
div.cartProductLinkOutDiv {
position: relative;
height: 80px;
}
span.cartSumNumber {
color: #C40000;
font-weight: bold;
font-size: 16px;
}
tr.cartProductItemTR td {
padding: 20px 20px;
}
span.cartSumPrice {
color: #C40000;
font-weight: bold;
font-size: 20px;
}
span.cartProductItemPromotionPrice {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #C40000;
}
span.cartProductItemSmallSumPrice {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #C40000;
}
span.cartTitlePrice {
color: #C40000;
font-size: 14px;
font-weight: bold;
margin-left: 5px;
margin-right: 3px;
}
div.cartProductLinkInnerDiv {
position: absolute;
bottom: 0;
height: 20px;
}
div.cartTitle button {
background-color: #AAAAAA;
border: 1px solid #AAAAAA;
color: white;
width: 53px;
height: 25px;
border-radius: 2px;
}
div.cartFoot {
background-color: #E5E5E5;
line-height: 50px;
margin: 20px 0px;
color: black;
padding-left: 20px;
}
div.cartFoot button {
background-color: #AAAAAA;
border: 0px solid #AAAAAA;
color: white;
height: 100%;
width: 120px;
height: 50px;
font-size: 20px;
text-align: center;
}
table.cartProductTable th {
font-weight: normal;
color: #3C3C3C;
padding: 20px 20px;
}
table.cartProductTable th.selectAndImage{
width:200px;
}
table.cartProductTable th.operation{
width:30px;
}
div.cartDiv {
max-width: 1013px;
margin: 10px auto;
color: black;
}
页脚
HTML部分
<div class="footer" id="footer">
<div class="copyright" id="copyright">
<div class="white_link">
<a href="#nowhere">关于天猫</a>
<a href="#nowhere"> 帮助中心</a>
<a href="#nowhere">开放平台</a>
<a href="#nowhere"> 诚聘英才</a>
<a href="#nowhere">联系我们</a>
<a href="#nowhere">网站合作</a>
<a href="#nowhere">法律声明</a>
<a href="#nowhere">知识产权</a>
<a href="#nowhere"> 廉正举报 </a>
</div>
<div class="white_link">
<a href="#nowhere"> 阿里巴巴集团</a>
<a href="#nowhere"> 淘宝网</a>
<a href="#nowhere">天猫 </a>
<a href="#nowhere"> 聚划算</a>
<a href="#nowhere">全球速卖通</a>
<a href="#nowhere">阿里巴巴国际交易市场
<a href="#nowhere">1688</a>
<a href="#nowhere">阿里妈妈</a>
<a href="#nowhere"> 阿里旅行·去啊 </a>
<a href="#nowhere"> 阿里云计算 </a>
<a href="#nowhere"> 阿里通信 </a>
<a href="#nowhere"> YunOS </a>
<a href="#nowhere"> 阿里旅行·去啊 </a>
<a href="#nowhere"> 万网 </a>
<a href="#nowhere"> 高德 </a>
<a href="#nowhere"> 来往 </a>
<a href="#nowhere"> 钉钉 </a>
<a href="#nowhere"> 支付宝 </a>
</div>
<div class="license">
<span>增值电信业务经营许可证：<span class="blod">浙B2-20110446</span> </span>
<span>网络文化经营许可证：<span class="blod">浙网文[2015]0295-065号</span> </span>
<span>
<img src="https://img.alicdn.com/tps/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" >
<a href="#nowhere">浙-（经营性）-2017005</a>
</span>
<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
<span>互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2012-0005</a></span>
<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
</div>
</div>
</div>
CSS部分
div.footer{
margin-top: 60px;
}
div.copyright a{
margin-left: 9px;
font-size: 11px;
color: #686868;
}
div.white_link{
padding-left: 20px;
padding-bottom: 10px;
}
div.license{
color:#A4A4A4;
margin-left: 29px;
margin-right: 95px;
color: #686868;
font-size: 11px;
}
div.license span{
margin-right: 40px;
}
div.license span.blod{
color: black;
font-weight: bold;
}
javascript的应用
其中用到了Jquery
我们需要提前导入
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
为了实现动态的效果，也就是说当用户点击选择框，结算按钮那里的价格就会自动更新。大概就是以下的效果。
什么都不勾选时
当点击一个选择框时
当点击全选时
上下的全选按钮都得到了相应，并且价格和商品件数都会随之而改变。
数量的修改
通过两种方式对于数量进行修改。
- 文本框
- 点击“+” 、“-”
实现代码
<script>
$(function(){
//点击产品选择框
$("img.cartProductItemIfSelected").click(function(){
var selectit = $(this).attr("selectit");
if("selectit"==selectit){
$(this).attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
$(this).attr("selectit","false")
$(this).parents("tr.cartProductItemTR").css("background-color","#fff");
syncSelect();
syncCreateOrderButton();
removePrice();
}
else{
$(this).attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
$(this).attr("selectit","selectit")
$(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
syncSelect();
syncCreateOrderButton();
getPrice();
}
});
//点击全选选择框
$("img.selectAllItem").click(function(){
var selectit = $(this).attr("selectit");
if("selectit"==selectit){
$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
$("img.selectAllItem").attr("selectit","false")
$("img.cartProductItemIfSelected").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
$("img.cartProductItemIfSelected").attr("selectit","false");
$("img.cartProductItemIfSelected").parents("tr.cartProductItemTR").css("background-color","#fff");
removePrice();
}
else{
$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
$("img.selectAllItem").attr("selectit","selectit");
$("img.cartProductItemIfSelected").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
$("img.cartProductItemIfSelected").attr("selectit","selectit");
$("img.cartProductItemIfSelected").parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
getPrice();
}
});
//键盘输入数量
$(".orderItemNumberSetting").keyup(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
num = parseInt(num);
if(isNaN(num))
{num= 1;
}
if(num<=0)
num = 1;
if(num>stock)
num = stock;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
//改变金额
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
getPrice();
});
//点击+增加数量
$(".numberPlus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
++num;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
getPrice();
});
//点击-减少数量
$(".numberMinus").click(function(){
var pid=$(this).attr("pid");
var stock= $("span.orderItemStock[pid="+pid+"]").text();
var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
--num;
if(num==0)num=1;
$(".orderItemNumberSetting[pid="+pid+"]").val(num);
price=convertNumber(price)*num;
price=parseFloat(price).toFixed(2);
$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
getPrice();
})
});
//全选函数
function syncSelect(){
var selectAll = true;
$(".cartProductItemIfSelected").each(function(){
if("false"==$(this).attr("selectit")){
selectAll = false;
}
});
if(selectAll){
$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
}
else{
$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
}
}
function syncCreateOrderButton(){
var selectAny = false;
$(".cartProductItemIfSelected").each(function(){
if("selectit"==$(this).attr("selectit")){
selectAny = true;
}
});
if(selectAny){
$("button.createOrderButton").css("background-color","#C40000");
$("button.createOrderButton").removeAttr("disabled");
}
else{
$("button.createOrderButton").css("background-color","#AAAAAA");
$("button.createOrderButton").attr("disabled","disabled");
}
}
//获取产品金额
function getPrice(){
var price;
var oiid;
var sumPrice=0;
var sumNum=0;
$(".cartProductItemIfSelected").each(function(){
if("selectit"==$(this).attr("selectit")){
oiid=$(this).attr("oiid");
pid=$(".orderItemNumberSetting[oiid="+oiid+"]").attr("pid");
num=$(".orderItemNumberSetting[pid="+pid+"]").val();
sumNum=parseInt(sumNum)+parseInt(num);
if(isNaN(sumNum)){
sumNum=1;
}
price=$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text();
price=convertNumber(price);
sumPrice=parseFloat(sumPrice)+parseFloat(price);
sumPrice=parseFloat(sumPrice).toFixed(2);
creatSumPrice(sumPrice,sumNum);
}
})
}
function convertNumber(price){
price=price.replace(/\￥|\,/g,'');
price=parseFloat(price).toFixed(2);
return price;
}
//将计算后的金额数转化成页面展示的价格，也就是增加价格符号
function creatSumPrice(sumPrice,sumMumber){
document.getElementById("cartSumPrice").innerHTML="￥"+sumPrice;
document.getElementById("cartTitlePrice").innerHTML="￥"+sumPrice;
document.getElementById("cartSumNumber").innerHTML=sumMumber;
}
//初始化价格
function removePrice(){
document.getElementById("cartSumPrice").innerHTML="￥0.00";
document.getElementById("cartTitlePrice").innerHTML="￥0.00";
document.getElementById("cartSumNumber").innerHTML="0";
}
</script>
如有什么不明白欢迎大家留言。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)