瞅我干啥？

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

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

 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>

 

posted on 2016-09-12 23:46  瞅我干啥？  阅读(6694)  评论(0)    收藏  举报