【JavaScript_DOM淘宝购物车】

作者：Evilchrist | 来源：互联网 | 2023-09-25 14:12

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

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

以下是我做的页面代码：

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             
 11             <img src="img/taobao_logo.gif" class="logo"/>
 12             
 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                 
 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>颜色：棕色 尺码：37li>
 57                             <li>保障： <img src="img/taobao_icon_01.jpg"/>li>
 58                         ul>
 59                     td>
 60                     <td class="td3" id="jf1">5td>
 61                     <td class="td4" id="mon">138.00td>
 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                 
 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>颜色：棕色 尺码：37li>
 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">12td>
 90                     <td class="td4">265.00td>
 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                 
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>颜色：棕色 尺码：37li>
116                             <li>保障： <img src="img/taobao_icon_01.jpg"/>li>
117                         ul>
118                     td>
119                     <td class="td3" id="jf3">3td>
120                     <td class="td4">58.00td>
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                 
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>颜色：棕色 尺码：37li>
147                             <li>保障： <img src="img/taobao_icon_01.jpg"/>li>
148                         ul>
149                     td>
150                     <td class="td3" id="jf4">12td>
151                     <td class="td4">12.00td>
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">0span>元p>
168                 <li><p class="li_2">可获得积分<span class="jfsum" id="integral">0span>点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: 0;padding: 0;}
 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: 0;height: 0;float:left;border-top: 15px solid transparent;border-left:15px solid #ff6600 ;border-bottom: 15px solid transparent;}
13 .jianto{position: absolute;height: 100%;right: 0;}
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){
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;
77

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

【Javascript_DOM 淘宝购物车】

推荐阅读

plugins
SSM框架实战：分页功能实现详解

本文详细介绍如何在SSM（Spring + Spring MVC + MyBatis）框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]

蜡笔小新 2024-11-23 11:40:33
web
41款高效LISP工具助力数据处理全流程

本文由公众号【数智物语】(ID: decision_engine)发布，关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程，介绍了41款实用工具，旨在帮助数据科学家和分析师提升工作效率。 ... [详细]

蜡笔小新 2024-11-24 00:11:50
web
JavaScript 中引号的多层嵌套使用技巧

本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题，包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]

蜡笔小新 2024-11-23 11:47:34
web
告别jQuery：Bootstrap5即将全面脱离jQuery依赖及其他前端热点

本文精选了2019年2月「前端大全」平台上的15篇热门文章，涵盖技术分享与资源推荐。关注前端大全，获取更多前沿信息，提升您的前端技能。 ... [详细]

蜡笔小新 2024-11-23 19:07:58
default
Java连接MySQL数据库的方法及测试示例

本文详细介绍了如何安装MySQL数据库，并通过Java编程语言实现与MySQL数据库的连接，包括环境搭建、数据库创建以及简单的查询操作。 ... [详细]

蜡笔小新 2024-11-23 18:58:43
tags
利用Scrapy构建的数据采集与分析可视化系统

本文探讨了如何使用Scrapy框架构建高效的数据采集系统，以及如何通过异步处理技术提升数据存储的效率。同时，文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]

蜡笔小新 2024-11-23 16:56:38
io
深入解析Apache Mina开发指南

本文由chszs撰写，详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤，适合希望深入了解Mina框架应用的开发者。 ... [详细]

蜡笔小新 2024-11-23 15:02:21
byte
2023年7月7日网络安全动态

汇总了2023年7月7日最新的网络安全新闻和技术更新，包括最新的漏洞披露、工具发布及安全事件。 ... [详细]

蜡笔小新 2024-11-23 13:35:48
case
嵌入式系统实验：GPIO控制与按键响应

本报告记录了嵌入式软件设计课程中的第二次实验，主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作，加深了对嵌入式系统硬件接口编程的理解。 ... [详细]

蜡笔小新 2024-11-23 13:00:00
io
LaTeX高级应用技巧

本文分享了作者在使用LaTeX过程中的几点心得，涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]

蜡笔小新 2024-11-23 12:47:16
io
利用R语言实现搜狗细胞词库的转换与处理

本文介绍如何使用R语言中的相关包来解析和转换搜狗细胞词库（.scel格式），并将其导出为CSV文件，以便于后续的数据分析和文本挖掘任务。 ... [详细]

蜡笔小新 2024-11-23 12:28:01
function
网页开发技巧：禁用鼠标右键功能

本文详细介绍了如何通过简单的JavaScript代码，在网页中实现禁用鼠标右键的功能，以保护网页内容不被轻易复制。 ... [详细]

蜡笔小新 2024-11-23 11:20:26
fetch
重学前端学习笔记（二十四）HTML里的链接元素

笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系& ... [详细]

蜡笔小新 2024-11-23 10:34:04
int
深入理解Awk文本处理工具

Awk是一款功能强大的文本分析与处理工具，尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录，并按照指定的字段分隔符来划分和处理这些记录，从而实现复杂的数据操作。 ... [详细]

蜡笔小新 2024-11-23 09:44:24
case
Java Socket编程指南：构建多客户端支持的服务端

本文基于Java官方文档进行了适当修改，旨在介绍如何实现一个能够同时处理多个客户端请求的服务端程序。在前文中，我们探讨了单客户端访问的服务端实现，而本篇将深入讲解多客户端环境下的服务端设计与实现。 ... [详细]

蜡笔小新 2024-11-22 23:16:34

Evilchrist

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章