让我们一起看一下淘宝的购物车是怎么做的吧,刚刚入门的我可能很多地方的用法都不够优化,不过个人感觉先把逻辑清晰之后再做的话其实也并不难哦,

以下是我做的页面代码:

HTML代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <link rel="stylesheet" href="css/index.css" />
  7. </head>
  8. <body>
  9. <div class="container">
  10. <!--logo-->
  11. <img src="img/taobao_logo.gif" class="logo"/>
  12. <!--nav-->
  13. <div class="nav">
  14. <span>您的位置:</span>
  15. <a href="#" class="a">首页</a> >
  16. <a href="#" class="a">我的淘宝</a> >
  17. <a href="#">我的购物车</a>
  18. </div>
  19. <!--查看购物车-->
  20. <ul class="lookcar">
  21. <li><p class="li_p">1、查看购物车</p><span class="san"></span><img src="img/ji.png" class="jianto"/></li>
  22. <li>2、确认订单信息<img src="img/ji.png" class="jianto"/></li>
  23. <li>3、付款到支付宝<img src="img/ji.png" class="jianto"/></li>
  24. <li>4、确认收回<img src="img/ji.png" class="jianto"/></li>
  25. <li>5、评价</li>
  26. </ul>
  27. <table id="shopping">
  28. <tr class="tr_top">
  29. <td class="td1">
  30. <input id="checkAll" type="checkbox" value="" onclick="checkAll()"/>全选
  31. </td>
  32. <td class="td2">店铺宝贝</td>
  33. <td class="td3">获积分</td>
  34. <td class="td4">单价(元)</td>
  35. <td class="td5">数量</td>
  36. <td class="td6">小计(元)</td>
  37. <td class="td7">操作</td>
  38. </tr>
  39.  
  40. <!--商品1-->
  41.  
  42. <tr class="tr2">
  43. <td colspan="7">
  44. 店铺:<span class="blue">纤巧百媚时尚鞋坊</span> 卖家:<span class="blue">纤巧百媚</span>
  45. <img src="img/taobao_relation.jpg"/>
  46. </td>
  47. </tr>
  48. <tr id="product1">
  49. <td class="td1">
  50. <input name="check" type="checkbox" />
  51. </td>
  52. <td class="td2">
  53. <img src="img/taobao_cart_01.jpg" class="img1"/>
  54. <ul class="text">
  55. <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
  56. <li>颜色:棕色 尺码:37</li>
  57. <li>保障: <img src="img/taobao_icon_01.jpg"/></li>
  58. </ul>
  59. </td>
  60. <td class="td3" id="jf1">5</td>
  61. <td class="td4" id="mon">138.00</td>
  62. <td class="td5">
  63. <img src="img/taobao_minus.jpg" onclick="onclickNum('num1','minus')"/>
  64. <input type="text" id="num1" class="num_input" value="1"/>
  65. <img src="img/taobao_adding.jpg" onclick="onclickNum('num1','add')"/>
  66. </td>
  67. <td class="td6" id="jg"></td>
  68. <td class="td7"><a href="#" class="del">删除</a></td>
  69. </tr>
  70. <!--商品2-->
  71. <tr class="tr2">
  72. <td colspan="7">
  73. 店铺:<span class="blue">纤巧百媚时尚鞋坊</span> 卖家:<span class="blue">纤巧百媚</span>
  74. <img src="img/taobao_relation.jpg"/>
  75. </td>
  76. </tr>
  77. <tr id="product2">
  78. <td class="td1">
  79. <input name="check" type="checkbox" />
  80. </td>
  81. <td class="td2">
  82. <img src="img/taobao_cart_02.jpg" class="img1"/>
  83. <ul class="text">
  84. <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
  85. <li>颜色:棕色 尺码:37</li>
  86. <li>保障: <img src="img/taobao_icon_01.jpg"/><img src="img/taobao_icon_02.jpg"/></li>
  87. </ul>
  88. </td>
  89. <td class="td3" id="jf2">12</td>
  90. <td class="td4">265.00</td>
  91. <td class="td5">
  92. <img src="img/taobao_minus.jpg" onclick="onclickNum('num2','minus')" />
  93. <input type="text" id="num2" class="num_input" value="1"/>
  94. <img src="img/taobao_adding.jpg" onclick="onclickNum('num2','add')"/>
  95. </td>
  96. <td class="td6" id="jg2"></td>
  97. <td class="td7"><a href="#" class="del">删除</a></td>
  98. </tr>
  99.  
  100. <!--商品3-->
  101. <tr class="tr2">
  102. <td colspan="7">
  103. 店铺:<span class="blue">纤巧百媚时尚鞋坊</span> 卖家:<span class="blue">纤巧百媚</span>
  104. <img src="img/taobao_relation.jpg"/>
  105. </td>
  106. </tr>
  107. <tr id="product3">
  108. <td class="td1">
  109. <input name="check" type="checkbox" />
  110. </td>
  111. <td class="td2">
  112. <img src="img/taobao_cart_03.jpg" class="img1"/>
  113. <ul class="text">
  114. <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
  115. <li>颜色:棕色 尺码:37</li>
  116. <li>保障: <img src="img/taobao_icon_01.jpg"/></li>
  117. </ul>
  118. </td>
  119. <td class="td3" id="jf3">3</td>
  120. <td class="td4">58.00</td>
  121. <td class="td5">
  122. <img src="img/taobao_minus.jpg" onclick="onclickNum('num3','minus')" />
  123. <input type="text" id="num3" class="num_input" value="1"/>
  124. <img src="img/taobao_adding.jpg" onclick="onclickNum('num3','add')" />
  125. </td>
  126. <td class="td6" id="jg3"></td>
  127. <td class="td7"><a href="#" class="del">删除</a></td>
  128. </tr>
  129.  
  130. <!--商品4-->
  131. <tr class="tr2">
  132. <td colspan="7">
  133. 店铺:<span class="blue">纤巧百媚时尚鞋坊</span> 卖家:<span class="blue">纤巧百媚</span>
  134. <img src="img/taobao_relation.jpg"/>
  135. </td>
  136. </tr>
  137.  
  138. <tr id="product4">
  139. <td class="td1">
  140. <input name="check" type="checkbox"/>
  141. </td>
  142. <td class="td2">
  143. <img src="img/taobao_cart_04.jpg" class="img1"/>
  144. <ul class="text">
  145. <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>
  146. <li>颜色:棕色 尺码:37</li>
  147. <li>保障: <img src="img/taobao_icon_01.jpg"/></li>
  148. </ul>
  149. </td>
  150. <td class="td3" id="jf4">12</td>
  151. <td class="td4">12.00</td>
  152. <td class="td5">
  153. <img src="img/taobao_minus.jpg" onclick="onclickNum('num4','minus')" />
  154. <input type="text" id="num4" class="num_input" value="1"/>
  155. <img src="img/taobao_adding.jpg" onclick="onclickNum('num4','add')" />
  156. </td>
  157. <td class="td6" id="jg4"></td>
  158. <td class="td7"><a href="#" class="del">删除</a></td>
  159. </tr>
  160.  
  161. </table>
  162. <a href="javascript:delAll()">
  163. <img src="img/taobao_del.jpg" alt="delete" id="del"/>
  164. </a>
  165.  
  166. <ul class="foot_rig">
  167. <li>商品总价(不含运费):<span id="total">0</span></p>
  168. <li><p class="li_2">可获得积分<span class="jfsum" id="integral">0</span></p></li>
  169. <li class="li_a"><img src="img/taobao_subtn.jpg" class="buy"/></li>
  170. </ul>
  171. </div>
  172. <script src="js/index.js"></script>
  173. </body>
  174. </html>

CSS代码:

  1. *{margin:;padding:;}
  2. .container{width: 1000px;margin: 0 auto;}
  3. a{text-decoration:none;color: #000;}
  4. li{list-style: none;}
  5. .logo{padding-top: 10px;}
  6. .nav{height: 60px;width: 100%;line-height: 60px;font-size: 14px;}
  7. .a{color: #3a68a3;}
  8. /*查看购物车*/
  9. .lookcar{width: 100%;}
  10. .lookcar li{box-sizing:border-box;width: 20%;height: 30px;float: left;line-height: 30px;text-align: center;background: #e4e4e4;position: relative;}
  11. .li_p{float: left;width: 92%;height: 100%;background: #ff6600;}
  12. .san{width:;height:;float:left;border-top: 15px solid transparent;border-left:15px solid #ff6600 ;border-bottom: 15px solid transparent;}
  13. .jianto{position: absolute;height: 100%;right:;}
  14. table{width: 100%;border-collapse:collapse;}
  15. table .tr_top{height: 50px;border-bottom: 4px solid #bac9dc;}
  16. table .tr2{height: 50px;}
  17. table #product1,#product2,#product3,#product4{height: 120px;background: #e2f2ff;}
  18. table .tr3 td{border-right: 1px solid #fff;}
  19. .blue{color: #3A68A3;}
  20. .td1{width: 70px;text-align: center;}
  21. .td2{width: 400px;}
  22. .td3,.td4{width: 100px;text-align: center;}
  23. .td6{width: 100px;text-align: center;color: #FF6600;font-weight: bold;}
  24. .td5{width: 130px;text-align: center;}
  25. .td7{text-align: center;color: #3A68A3;}
  26. .img1{float: left;width: 100px;height: 100px;margin-left: 4px;}
  27. .text{float: left;padding-left: 10px;font-size:14px ;line-height: 24px;}
  28. .text li:first-child{color: #3A68A3;}
  29. .num_input{width: 30px;}
  30. .foot{width: 100%;height: 150px;}
  31. .foot_left{float: left;}
  32. #del{width: 130px;height: 30px;margin-top: 60px;}
  33. .foot_rig{width:300px;float: right;}
  34. .foot_rig li{padding: 10px 0;float: right;}
  35. .li_2{margin-left: 150px;}
  36. .sum,.jfsum{font-size:18px;font-weight: bold; color: #FF6600;}
  37. .delete{color: #3A68A3;}

JS代码:

  1. //全选
  2. function checkAll(){
  3. var inp=document.getElementsByName("check");
  4. var ind=document.getElementById("checkAll");
  5. for(var i of inp){
  6. i.checked=ind.checked;
  7. cpCount();
  8. }
  9. }
  10. //删除一行
  11. var dels = document.getElementsByClassName("del");
  12. for (var x of dels) {
  13. x.onclick = deleteTr;
  14. }
  15. function deleteTr(){
  16. this.parentNode.parentNode.previousSibling.previousSibling.remove()
  17. this.parentNode.parentNode.remove();
  18. cpCount();
  19. }
  20. /*删除选中行的商品*/
  21. var delss=document.getElementById('del'); //获取删除所选的按钮
  22. delss.onclick = function delec(){
  23. var inp=document.getElementsByName("check"); //获取每个多选框
  24. for (var i=inp.length-1;i>=0;i--){
  25. if(inp[i].checked == true){
  26. inp[i].parentNode.parentNode.previousSibling.previousSibling.remove();
  27. inp[i].parentNode.parentNode.remove();
  28. inp.checked = false;
  29. cpCount();
  30. }
  31. }
  32. }
  33. //商品数量
  34. function onclickNum(numId,count){
  35. var numId=document.getElementById(numId);
  36. if(count=="minus"){
  37. if(numId.value<=1){
  38. alert("不能是0");
  39. return false;
  40. }else{
  41. numId.value=parseInt(numId.value)-1;
  42. cpCount();
  43. }
  44. }else{
  45. numId.value=parseInt(numId.value)+1;
  46. cpCount();
  47. }
  48. }
  49. //计算商品的总价和积分总
  50. function cpCount(){
  51. var total=0; //所有商品的总计
  52. var integral=0; //所有商品的积分
  53. var point; //每一行商品的单品积分
  54. var price; //每一行商品的单价
  55. var nums; //每一行商品的数量
  56. var subtotal; //每一行商品的小计
  57. //找出表格中所有的行数
  58. var tableTr=document.getElementById("shopping").getElementsByTagName("tr");
  59. if(tableTr.length>0){
  60. for(var i=1;i<tableTr.length;i++){
  61. if(tableTr[i].getElementsByTagName("td").length>2){ //找到所有行数内的td数量大于2的行数
  62. point=tableTr[i].getElementsByTagName("td")[2].innerHTML; //每一行商品的单品积分
  63. price=tableTr[i].getElementsByTagName("td")[3].innerHTML; //每一行商品的单价
  64. nums=tableTr[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value; //每一行商品的数量
  65. integral+=point*nums; //所有商品的积分的和 = 每一行商品的单价积分 x 数量 相加
  66. total+=price*nums; //所有商品的总计的和 = 每一个商品的单价 x 数量 相加
  67. tableTr[i].getElementsByTagName("td")[5].innerHTML=price*nums; //每行商品小计 =商品的单价 x 数量
  68.  
  69. }
  70.  
  71. }
  72. document.getElementById("total").innerHTML=total;
  73. document.getElementById("integral").innerHTML=integral;
  74. }
  75. }
  76. window.onload=cpCount;

代码中如果有存在的问题希望可以帮我指出哦,当然如果有什么不会的不理解的也可以在下面问我哦~~~~~~祝大家周末愉快

【JavaScript_DOM 淘宝购物车】的更多相关文章

  1. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  2. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  3. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  4. jQuery实现淘宝购物车小组件

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...

  5. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  6. vue实现淘宝购物车功能

    淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...

  7. web——自己实现一个淘宝购物车页面

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  8. jquery模拟淘宝购物车

    今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...

  9. Android仿淘宝购物车demo

    夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添 ...

随机推荐

  1. Intellij IDEA设置运行时Java参数

    1.选中类,点击顶部菜单:Run-->Edit Configuration,如下所示: 2.选择Application,指定的类,在右边选择Configuration,并在VM options中 ...

  2. Vue-Methods中使用Filter

    1.Vue中Filter声明方式 Vue中存在两种声明Filter过滤器的方式: 1.全局过滤器 Vue.filter('testFilter1',function(val){ console.log ...

  3. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  4. iOS Swift 模块练习/swift基础学习

    SWIFT项目练习     SWIFT项目练习2 iOS Swift基础知识代码 推荐:Swift学习使用知识代码软件 0.swift中的宏定义(使用方法代替宏) 一.视图  +控件 1.UIImag ...

  5. iOS 内存泄漏排查以及处理

    使用Xcode7的Instruments检测解决iOS内存泄露   文/笨笨的糯糯(简书作者)原文链接:http://www.jianshu.com/p/0837331875f0作为一名iOS开发攻城 ...

  6. 为了CET-4!

    Directions For tiis part,you are allowed 30 minutes to write an essay.Suppose there are two options ...

  7. Find all factorial numbers less than or equal to N

    A number N is called a factorial number if it is the factorial of a positive integer. For example, t ...

  8. bzoj 3566: [SHOI2014]概率充电器

    Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品--概率充电器:"采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率 ...

  9. java之自动过滤提交文本中的html代码script代码

    public class test { public static String Html2Text(String inputString) { String htmlStr = inputStrin ...

  10. package-cleanup

    package-cleanup 是一个python开发的命令程序,用来清除本机已安装的.重复的 或孤立的软件包. desktop版的CentOS镜像包含这个工具,而Minimal版的CentOS镜像不 ...