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>
