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

以下是我做的页面代码：

HTML代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <link rel="stylesheet" href="css/index.css" />

     </head>

     <body>

         <div class="container">

             <!--logo-->

             <img src="img/taobao_logo.gif" class="logo"/>

             <!--nav-->

             <div class="nav">

                 <span>您的位置：</span>

                 <a href="#" class="a">首页</a> >

                 <a href="#" class="a">我的淘宝</a> >

                 <a href="#">我的购物车</a>

             </div>

             <!--查看购物车-->

             <ul class="lookcar">

                 <li><p class="li_p">1、查看购物车</p><span class="san"></span><img src="img/ji.png" class="jianto"/></li>

                 <li>2、确认订单信息<img src="img/ji.png" class="jianto"/></li>

                 <li>3、付款到支付宝<img src="img/ji.png" class="jianto"/></li>

                 <li>4、确认收回<img src="img/ji.png" class="jianto"/></li>

                 <li>5、评价</li>

             </ul>

             <table id="shopping">

                 <tr class="tr_top">

                     <td class="td1">

                         <input id="checkAll" type="checkbox" value="" onclick="checkAll()"/>全选

                     </td>

                     <td class="td2">店铺宝贝</td>

                     <td class="td3">获积分</td>

                     <td class="td4">单价（元）</td>

                     <td class="td5">数量</td>

                     <td class="td6">小计（元）</td>

                     <td class="td7">操作</td>

                 </tr>

                 <!--商品1-->

                 <tr class="tr2">

                     <td colspan="7">

                         店铺：<span class="blue">纤巧百媚时尚鞋坊</span>  卖家：<span class="blue">纤巧百媚</span>

                         <img src="img/taobao_relation.jpg"/>

                     </td>

                 </tr>

                 <tr id="product1">

                     <td class="td1">

                     <input name="check" type="checkbox"  />

                     </td>

                     <td class="td2">

                         <img src="img/taobao_cart_01.jpg" class="img1"/>

                         <ul class="text">

                             <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>

                             <li>颜色：棕色 尺码：37</li>

                             <li>保障： <img src="img/taobao_icon_01.jpg"/></li>

                         </ul>

                     </td>

                     <td class="td3" id="jf1">5</td>

                     <td class="td4" id="mon">138.00</td>

                     <td class="td5">

                         <img src="img/taobao_minus.jpg" onclick="onclickNum('num1','minus')"/>

                         <input type="text" id="num1" class="num_input" value="1"/>

                         <img src="img/taobao_adding.jpg" onclick="onclickNum('num1','add')"/>

                     </td>

                     <td class="td6" id="jg"></td>

                     <td class="td7"><a href="#" class="del">删除</a></td>

                 </tr>

                 <!--商品2-->

                 <tr class="tr2">

                     <td colspan="7">

                         店铺：<span class="blue">纤巧百媚时尚鞋坊</span>  卖家：<span class="blue">纤巧百媚</span>

                         <img src="img/taobao_relation.jpg"/>

                     </td>

                 </tr>

                 <tr id="product2">

                     <td class="td1">

                     <input name="check" type="checkbox"  />

                     </td>

                     <td class="td2">

                         <img src="img/taobao_cart_02.jpg" class="img1"/>

                         <ul class="text">

                             <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>

                             <li>颜色：棕色 尺码：37</li>

                             <li>保障： <img src="img/taobao_icon_01.jpg"/><img src="img/taobao_icon_02.jpg"/></li>

                         </ul>

                     </td>

                     <td class="td3" id="jf2">12</td>

                     <td class="td4">265.00</td>

                     <td class="td5">

                         <img src="img/taobao_minus.jpg" onclick="onclickNum('num2','minus')" />

                         <input type="text" id="num2" class="num_input" value="1"/>

                         <img src="img/taobao_adding.jpg" onclick="onclickNum('num2','add')"/>

                     </td>

                     <td class="td6" id="jg2"></td>

                     <td class="td7"><a href="#" class="del">删除</a></td>

                 </tr>

                 <!--商品3-->

                 <tr class="tr2">

                     <td colspan="7">

                         店铺：<span class="blue">纤巧百媚时尚鞋坊</span>  卖家：<span class="blue">纤巧百媚</span>

                         <img src="img/taobao_relation.jpg"/>

                     </td>

                 </tr>

                 <tr id="product3">

                     <td class="td1">

                     <input name="check" type="checkbox" />

                     </td>

                     <td class="td2">

                         <img src="img/taobao_cart_03.jpg" class="img1"/>

                         <ul class="text">

                             <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>

                             <li>颜色：棕色 尺码：37</li>

                             <li>保障： <img src="img/taobao_icon_01.jpg"/></li>

                         </ul>

                     </td>

                     <td class="td3" id="jf3">3</td>

                     <td class="td4">58.00</td>

                     <td class="td5">

                         <img src="img/taobao_minus.jpg" onclick="onclickNum('num3','minus')" />

                         <input type="text" id="num3" class="num_input" value="1"/>

                         <img src="img/taobao_adding.jpg" onclick="onclickNum('num3','add')" />

                     </td>

                     <td class="td6" id="jg3"></td>

                     <td class="td7"><a href="#" class="del">删除</a></td>

                 </tr>

                 <!--商品4-->

                 <tr class="tr2">

                     <td colspan="7">

                         店铺：<span class="blue">纤巧百媚时尚鞋坊</span>  卖家：<span class="blue">纤巧百媚</span>

                         <img src="img/taobao_relation.jpg"/>

                     </td>

                 </tr>

                 <tr id="product4">

                     <td class="td1">

                     <input name="check" type="checkbox"/>

                     </td>

                     <td class="td2">

                         <img src="img/taobao_cart_04.jpg" class="img1"/>

                         <ul class="text">

                             <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li>

                             <li>颜色：棕色 尺码：37</li>

                             <li>保障： <img src="img/taobao_icon_01.jpg"/></li>

                         </ul>

                     </td>

                     <td class="td3" id="jf4">12</td>

                     <td class="td4">12.00</td>

                     <td class="td5">

                         <img src="img/taobao_minus.jpg" onclick="onclickNum('num4','minus')" />

                         <input type="text" id="num4" class="num_input" value="1"/>

                         <img src="img/taobao_adding.jpg" onclick="onclickNum('num4','add')" />

                     </td>

                     <td class="td6" id="jg4"></td>

                     <td class="td7"><a href="#" class="del">删除</a></td>

                 </tr>

             </table>

             <a href="javascript:delAll()">

                 <img src="img/taobao_del.jpg" alt="delete" id="del"/>

             </a>

             <ul class="foot_rig">

                 <li>商品总价（不含运费）：<span id="total">0</span>元</p>

                 <li><p class="li_2">可获得积分<span class="jfsum" id="integral">0</span>点</p></li>

                 <li class="li_a"><img src="img/taobao_subtn.jpg" class="buy"/></li>

             </ul>

         </div>

     <script src="js/index.js"></script>

     </body>

 </html>

CSS代码:

 *{margin:;padding:;}

 .container{width: 1000px;margin: 0 auto;}

 a{text-decoration:none;color: #000;}

 li{list-style: none;}

 .logo{padding-top: 10px;}

 .nav{height: 60px;width: 100%;line-height: 60px;font-size: 14px;}

 .a{color: #3a68a3;}

 /*查看购物车*/

 .lookcar{width: 100%;}

 .lookcar li{box-sizing:border-box;width: 20%;height: 30px;float: left;line-height: 30px;text-align: center;background: #e4e4e4;position: relative;}

 .li_p{float: left;width: 92%;height: 100%;background: #ff6600;}

 .san{width:;height:;float:left;border-top: 15px solid transparent;border-left:15px solid #ff6600 ;border-bottom: 15px solid transparent;}

 .jianto{position: absolute;height: 100%;right:;}

 table{width: 100%;border-collapse:collapse;}

 table .tr_top{height: 50px;border-bottom: 4px solid #bac9dc;}

 table .tr2{height: 50px;}

 table #product1,#product2,#product3,#product4{height: 120px;background: #e2f2ff;}

 table .tr3 td{border-right: 1px solid #fff;}

 .blue{color: #3A68A3;}

 .td1{width: 70px;text-align: center;}

 .td2{width: 400px;}

 .td3,.td4{width: 100px;text-align: center;}

 .td6{width: 100px;text-align: center;color: #FF6600;font-weight: bold;}

 .td5{width: 130px;text-align: center;}

 .td7{text-align: center;color: #3A68A3;}

 .img1{float: left;width: 100px;height: 100px;margin-left: 4px;}

 .text{float: left;padding-left: 10px;font-size:14px ;line-height: 24px;}

 .text li:first-child{color: #3A68A3;}

 .num_input{width: 30px;}

 .foot{width: 100%;height: 150px;}

 .foot_left{float: left;}

 #del{width: 130px;height: 30px;margin-top: 60px;}

 .foot_rig{width:300px;float: right;}

 .foot_rig li{padding: 10px 0;float: right;}

 .li_2{margin-left: 150px;}

 .sum,.jfsum{font-size:18px;font-weight: bold; color: #FF6600;}

 .delete{color: #3A68A3;}

JS代码:

 //全选

 function checkAll(){

     var inp=document.getElementsByName("check");

     var ind=document.getElementById("checkAll");

    for(var i of inp){

        i.checked=ind.checked;

        cpCount();

    }

 }

 //删除一行

 var dels =    document.getElementsByClassName("del");

     for (var x of dels) {

         x.onclick = deleteTr;

     }

     function deleteTr(){

         this.parentNode.parentNode.previousSibling.previousSibling.remove()

         this.parentNode.parentNode.remove();

         cpCount();

     }

 /*删除选中行的商品*/

 var delss=document.getElementById('del'); //获取删除所选的按钮

 delss.onclick = function delec(){

     var inp=document.getElementsByName("check");  //获取每个多选框

     for (var i=inp.length-1;i>=0;i--){

         if(inp[i].checked == true){

             inp[i].parentNode.parentNode.previousSibling.previousSibling.remove();

             inp[i].parentNode.parentNode.remove();

             inp.checked = false;

             cpCount();

         }

     }

 }

 //商品数量

 function onclickNum(numId,count){

     var numId=document.getElementById(numId);

     if(count=="minus"){

         if(numId.value<=1){

             alert("不能是0");

             return false;

             }else{

             numId.value=parseInt(numId.value)-1;

             cpCount();

             }

     }else{

         numId.value=parseInt(numId.value)+1;

         cpCount();

         }

     }

 //计算商品的总价和积分总

 function cpCount(){

     var total=0;      //所有商品的总计

     var integral=0;   //所有商品的积分

     var point;      //每一行商品的单品积分

     var price;     //每一行商品的单价

     var nums;    //每一行商品的数量

     var subtotal;  //每一行商品的小计

 //找出表格中所有的行数

     var tableTr=document.getElementById("shopping").getElementsByTagName("tr");

     if(tableTr.length>0){

     for(var i=1;i<tableTr.length;i++){

         if(tableTr[i].getElementsByTagName("td").length>2){ //找到所有行数内的td数量大于2的行数

         point=tableTr[i].getElementsByTagName("td")[2].innerHTML;  //每一行商品的单品积分

         price=tableTr[i].getElementsByTagName("td")[3].innerHTML;  //每一行商品的单价

         nums=tableTr[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value; //每一行商品的数量

         integral+=point*nums;  //所有商品的积分的和 = 每一行商品的单价积分 x 数量   相加

         total+=price*nums;       //所有商品的总计的和 = 每一个商品的单价 x 数量   相加

         tableTr[i].getElementsByTagName("td")[5].innerHTML=price*nums;  //每行商品小计 =商品的单价 x 数量

         }

     }

     document.getElementById("total").innerHTML=total;

     document.getElementById("integral").innerHTML=integral;

     }

 }

 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. 基于apache httpclient 调用Face++ API

    简要: 本文简要介绍使用Apache HttpClient工具调用旷世科技的Face API. 前期准备: 依赖包maven地址: <!-- https://mvnrepository.com/ ...

  2. springMVC(3)---利用pdf模板下载

    springMVC(3)---利用pdf模板下载 在实际开发中,很多时候需要通过把数据库中的数据添加到pdf模板中,然后供客户下载,那我们该如何中呢? 本文主要内容是:用java在pdf模板中加入数据 ...

  3. List集合在遍历过程中的删除

    List集合在遍历过程中的删除:[1,1,2,3,4,5] for循环正续会漏掉一个1 for(int i=0;i<list.size();i++){ if(list.get(i).equals ...

  4. 查看Flink的Job Graph时的问题

    Flink运行Job时,可以通过Job Graph看到执行计划,但是如果用IE,会被坑: 换成谷歌Chrome,就OK了: 这个Job Grap,好像是SVG的,可能是IE不支持SVG,需要安装插件才 ...

  5. iOS Button 上文字图片位置的设置

    1. 添加图片+文字/文字+图片 ,不分前后,图片默认在文字前边 加空格隔开 UIButton * button =[[UIButton alloc] initWithFrame:CGRectMake ...

  6. xml生成方式二（Xml序列化器XmlSerializer）

    一.andoirdAPI提供了xml生成和解析的API: XmlSerializer xs = Xml.newSerializer();和XmlPullParser xmlPullParser = X ...

  7. 在Ubuntu14.04下安装 labelImg (标数据用)

    安装 SIP 下载 SIP 并解压 : $ sudo python configure.py $ make $ sudo make install 安装 依赖库 $  sudo apt-get ins ...

  8. InnoDB 逻辑存储结构

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/80 如果创建表时没有显示的定义主键,mysql会按如下方式创建主 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）

    这几个例子是第二章除了入门之外比较简单的几个,就做个合集,把最核心的代码(第二参数)和 引用放上来即可,不作多解释. 2D地图添加指北针widget 2D地图一般修正方向为正北方就需要这个widget ...

  10. input 上传图片显示预览、调用摄像头，ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...