微信扫一扫打赏支持

js实现点击不同的按钮后各自返回被点击的次数

js实现点击不同的按钮后各自返回被点击的次数

一、总结

1、注意：返回的不是三个按钮总的点击数，而是每一个的

2、用全局变量的话每一个按钮要多一个函数，用闭包就很方便

 

二、js实现点击不同的按钮后各自返回被点击的次数

练习3：

  • 实例描述：点击按钮后自动弹出按钮被累计点击的次数
  • 案例要点：

    理解闭包的基本用法。

 

三、代码

截图

注意：返回的不是三个按钮总的点击数，而是每一个的

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>练习03</title>
 6     <style type="text/css">
 7         input{
 8             width: 150px;
 9             height: 80px;
10             border-radius: 10px;
11             font-size: 24px;
12             padding: 10px;
13             background: green;
14             outline: none;
15         }
16     </style>
17 </head>
18 <body>
19     <input type="button" value="按钮A" onclick="countA()">
20     <input type="button" value="按钮B" onclick="countB()">
21     <input type="button" value="按钮C" onclick="countC()">
22     <script>
23     //方案1 大于两个时候比较繁琐
24         var counter=0;
25         var counter2=0; 
26         function count1(){ //1、全局变量适合做返回所有按钮的总点击数，否则用全局变量的话每一个按钮要多一个函数，用闭包就很方便
27             counter+=1;
28             alert('您共点击了我'+counter+'次')
29         }
30         function count2(){
31             counter2+=1;
32             alert('您共点击了我'+counter2+'次')
33         }
34     //方案2
35     function count() {
36         var counter = 0;
37         function increment() {
38             counter += 1; //2、闭包实现原理：这个匿名函数用了外面函数的变量，外面函数的变量被常驻内存，有几个匿名函数，匿名函数中用的的这个变量就有多少个在内存，
39             alert('您共点击了我'+counter+'次');
40         }
41         return increment
42     }
43    var countA=count();
44    var countB=count()
45    var countC=count()
46 
47 
48     // function count() {
49     //     var counter = 0;
50     //     (function () {
51     //         return(function(){
52     //             counter += 1;
53     //             alert('您共点击了我'+counter+'次');
54     //         }
55     //         )()
56     //     })()
57     // }
58     </script>
59 </body>
60 </html>

 

posted @ 2018-05-13 20:45  范仁义  阅读(1835)  评论(0)  编辑  收藏  举报