购物车的实现 js

最新推荐文章于 2019-08-06 20:23:07 发布

weixin_30505485

最新推荐文章于 2019-08-06 20:23:07 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/dashen/p/3897971.html

版权

此实验的注意事项：

对于button的disabled的属性的掌握不足，导致数量减少到0后再点击增加后数量增加仍没有减少的功能，disabled在js中必须用true或false，开始一直用‘true'导致错误，注意是关键字啊；
对于children与childNode的理解不足，不知道此可以检测到空文本节点，所以导致调试半天也没反应，所以即使清除文本节点；
注意各个事件所触发的事件，注意联动效果；

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7     .table_css{
  8         border:#5524E3 2px solid;
  9         background:#E5CDCE;
 10         margin-left:400px;
 11     }
 12     td{
 13         border:#1749BC 1px solid;
 14         text-align:center;
 15     }
 16     button{
 17         background:#3AD8A9;
 18         color:#EC214D;
 19         width:20px;
 20     }
 21     #money{
 22         background:#9B9494;
 23         width:30px;
 24     }
 25     #add{
 26         width:80px;
 27     }
 28     .hr_css{
 29         height:10px;
 30         width:100%;
 31         background:#D825D2;
 32     }
 33     #goods{
 34         width:580px;
 35     }
 36 </style>
 37 
 38 <script>
 39     function $(id){
 40         return document.getElementById(id);
 41     }
 42     window.onload=function(){
 43         var add=$('add');
 44         add.onclick=addgoods;
 45     }
 46     function addgoods(){
 47         var goods = document.getElementsByTagName('tr');
 48         var name=$('name').value;
 49         //判断此元素是否存在于购物车中
 50         for(var i=3;i<goods.length;i++){
 51             if(goods[i].firstChild.innerHTML==name){
 52                 alert('此物品已经添加！');
 53                 return;
 54             }
 55         }
 56         
 57         var price=$('price').value;
 58         var amount=$('amount').value;
 59         var t=$('goods');
 60         var tr=t.insertRow(1);
 61         //分别创建列
 62         var td_1 = tr.insertCell(0);
 63         td_1.innerHTML = name;
 64         
 65         var td_2 = tr.insertCell(1);
 66         td_2.innerHTML = price;
 67         
 68         var td_3 = tr.insertCell(2);
 69         //-------------------------------
 70         var remove_1=document.createElement('button');
 71         remove_1.id='remove_1';
 72         remove_1.innerHTML='-';
 73         td_3.appendChild(remove_1);
 74         remove_1.onclick=function(){
 75             var count_text = this.parentNode.firstChild.nextSibling;
 76             //判断数量
 77             if(count_text.value<=0){
 78                 this.disabled=true;//"disabled"; 
 79                 return;
 80             }
 81             //数量减少
 82             count_text.value = window.parseInt(count_text.value)-1;
 83             //总价减少
 84             this.parentNode.nextSibling.innerHTML = count_text.value*price;
 85             //购物车的总价减少
 86             $('money').innerHTML=window.parseInt($('money').innerHTML)-price;
 87             //数量减少
 88             amount-=1;
 89         }
 90         //nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
 91         var td_amount = document.createElement('input');
 92         td_amount.type="text";
 93         td_amount.value = amount;
 94         td_amount.style.background="#E5CDCE";
 95         td_amount.style.textAlign='center';
 96         td_amount.onblur=function(){
 97             var cc=td_amount.value;
 98             if(cc==amount)
 99                 return;
100             else{
101                 $('money').innerHTML=window.parseInt($('money').innerHTML)+cc*price-this.parentNode.nextSibling.innerHTML;
102                 this.parentNode.nextSibling.innerHTML=cc*price;
103             }
104         }
105                 
106         td_3.appendChild(td_amount);
107         //++++++++++++++++++++++++++++++++
108         var add_1=document.createElement('button');
109         add_1.id='add_1';
110         add_1.innerHTML='+';
111         td_3.appendChild(add_1);
112         add_1.onclick=function(){
113             this.parentNode.firstChild.disabled=false; 
114             //数量增加
115             var count_text = this.parentNode.firstChild.nextSibling;
116             count_text.value = window.parseInt(count_text.value)+1;
117             //总价增加
118             this.parentNode.nextSibling.innerHTML = count_text.value*price;
119             //购物车的总价增加
120             $('money').innerHTML=window.parseInt($('money').innerHTML)+window.parseInt(price);
121             //数量增加
122             amount+=1;
123         }
124         
125         var td_4 = tr.insertCell(3);
126         td_4.innerHTML = price*amount;
127         
128         var td_5 = tr.insertCell(4);
129         var remove = document.createElement('button');
130         remove.innerHTML = "删除";
131         remove.style.width= '50px';
132         remove.onclick = function() {
133             var remove_tr = this.parentNode.parentNode;
134             //购物车中的元素减少，钱也相应的减少
135             $('money').innerHTML=window.parseInt($('money').innerHTML)-td_4.innerHTML;
136             //移除元素
137             $('goods').firstChild.removeChild(remove_tr);
138         }
139         td_5.appendChild(remove);
140         
141         //总的价格变化
142         var count_all=$('money').innerHTML;
143         $('money').innerHTML=price*amount+window.parseInt(count_all);
144     }
145         
146 </script>
147 
148 </head>
149 
150 <body>
151 <table class="table_css">
152     <tr>
153         <td>物品</td>
154         <td>价格</td>
155         <td>数量</td>
156         <td></td>
157     </tr>
158     <tr>
159         <td><input type="text" id="name"></td>
160         <td><input type="text" id="price"></td>
161         <td><input type="text" id="amount"></td>
162         <td><button id="add">添加</button></td>
163     </tr>
164 </table>
165 <hr class="hr_css">
166 <table id="goods" class="table_css"><tr>
167         <td>物品</td>
168         <td>价格</td>
169         <td>数量</td>>
170         <td>总价</td>
171         <td></td>
172     </tr>
173 </table>
174 总计：<label id="money">0</label>元
175 </body>
176 </html>

转载于:https://www.cnblogs.com/dashen/p/3897971.html

weixin_30505485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车的实现 js

此实验的注意事项：对于button的disabled的属性的掌握不足，导致数量减少到0后再点击增加后数量增加仍没有减少的功能，disabled在js中必须用true或false，开始一直用‘true'导致错误，注意是关键字啊；对于children与childNode的理解不足，不知道此可以检测到空文本节点，所以导致调试半天也没反应，所以即使清除文本节点；注意各个事件所触发的事件，注...
复制链接

扫一扫