码迷,mamicode.com
首页 > Web开发 > 详细

原生js 实现购物车价格和总价 统计

时间:2016-09-13 01:21:33      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload=function(){
 8         var aIn=document.querySelectorAll(input);
 9         var aEm=document.querySelectorAll(em);
10         var aI=document.querySelectorAll(i);
11         for(var i=0;i<aIn.length;i++){
12 
13             (function(index){
14                 if(aIn[index].value==0){
15                         delete localStorage[a+index];
16                  }
17                 aIn[i].oninput=function(){
18                     aI[index].innerHTML=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);
19                     localStorage[a+index]=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);
20                     
21                     storage();
22                 };
23 
24             })(i);
25             
26        }
27        function storage(){
28                var arr=[];
29             function findArr(){
30                    for(var name in localStorage){
31                     arr.push(localStorage[name]);
32                     
33                 }
34                 return arr;
35             }
36             var d=findArr();
37             var p=0;
38             for(var i=0;i<d.length;i++){
39                 var p=Number(d[i])+p;
40                 div1.innerHTML=总价:+p;
41             }
42         }
43        
44     };
45     </script>
46 </head>
47 <body>
48     <div>
49         <p>商品名称:碧血剑谱</p>
50         <input type="number" min="0" value="0">
51         <em>30$</em><br><br>
52         <i></i>
53 
54     </div>
55     <div>
56         <p>商品名称:九阴真经</p>
57         <input type="number" min="0" value="0">
58         <em>60$</em><br><br>
59         <i></i>
60 
61     </div>
62     <div>
63         <p>商品名称:太极拳谱</p>
64         <input type="number" min="0" value="0">
65         <em>90$</em><br><br>
66         <i></i>
67 
68     </div>
69     <div id="div1">0</div>
70 </body>
71 </html>

 

原生js 实现购物车价格和总价 统计

标签:

原文地址:http://www.cnblogs.com/lixuekui/p/5866882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!