文章目录

天猫实战——实现最全购物车功能
- 页面展示
- 核心代码块
- - 置顶导航
  - 产品列表
  - - HTML部分
    - CSS部分
  - 页脚
  - - HTML部分
    - CSS部分
  - javascript的应用
  - - 什么都不勾选时
    - 当点击一个选择框时
    - 当点击全选时
    - 数量的修改
    - 实现代码

天猫实战——实现最全购物车功能

学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到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>

如有什么不明白欢迎大家留言。

前端实战——实现购物车功能相关推荐

vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据作者:狐狸家的鱼本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
js购物车功能php,实战项目：用原生JS实现一个购物车的功能
实战:购物车功能一.两个实用的数组函数 1.1 Array.every() every()方法传入回调函数,这个回调函数有三个参数,分别是: item:用于测试的当前值: index:当前测试值的索 ...
JAVA项目实战开发电商项目案例（八）购物车功能开发
文章目录 1购物车功能演示 2购物车功能模块分析 2.1购物车流程 2.2 数据库表分析 2.3购物车接口分析 2.4关键代码分析 3个人总结 4个人说明 5[我的个人网站](http://www.l ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
SDCC 2015前端专场札记：Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战
SDCC 2015前端专场札记:Facebook.百度.腾讯.美团.饿了么等互联网公司的前端实战发表于2015-11-27 14:14| 682次阅读| 来源AdMaster| 1 条评论| 作者刘 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
学前端可以做哪些功能?
很高兴能回答你的问题,在分享前端可以做哪些功能之前,首先分享一下什么是前端开发,所谓的web前端开发是相对的概念,是相对网站后端开发而言的,凡是通过浏览器到用户端计算机系统的行为,都需要用到前端技术, ...
javaweb实现购物车功能
本篇文章讲的是如何使用javaweb相关知识模拟购物车功能 (web练手小项目) 使用到的相关知识(部分知识点在文章中简单涉及到): html cs javascript jsp servle ...

前端实战——实现购物车功能

文章目录

天猫实战——实现最全购物车功能

页面展示

核心代码块

置顶导航

产品列表

HTML部分

CSS部分

页脚

HTML部分

CSS部分

javascript的应用

什么都不勾选时

当点击一个选择框时

当点击全选时

数量的修改

实现代码

前端实战——实现购物车功能相关推荐

最新文章

热门文章