【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 淘宝购物车】

推荐阅读

include
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
main
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
main
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
web
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
web
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
web
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
char
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
ip
VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]

蜡笔小新 2023-12-13 15:15:30
function
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
char
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
char
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
char
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
include
指针的引用以及在什么情况下使用指针的引用

本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]

蜡笔小新 2023-12-13 12:54:29
include
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
char
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03

Evilchrist

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

Tags | 热门标签

RankList | 热门文章