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

一、总结

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

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

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

练习3：

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

    理解闭包的基本用法。

三、代码

截图

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>练习03</title>

     <style type="text/css">

         input{

             width: 150px;

             height: 80px;

             border-radius: 10px;

             font-size: 24px;

             padding: 10px;

             background: green;

             outline: none;

         }

     </style>

 </head>

 <body>

     <input type="button" value="按钮A" onclick="countA()">

     <input type="button" value="按钮B" onclick="countB()">

     <input type="button" value="按钮C" onclick="countC()">

     <script>

     //方案1 大于两个时候比较繁琐

         var counter=0;

         var counter2=0;

         function count1(){ //1、全局变量适合做返回所有按钮的总点击数，否则用全局变量的话每一个按钮要多一个函数，用闭包就很方便

             counter+=1;

             alert('您共点击了我'+counter+'次')

         }

         function count2(){

             counter2+=1;

             alert('您共点击了我'+counter2+'次')

         }

     //方案2

     function count() {

         var counter = 0;

         function increment() {

             counter += 1; //2、闭包实现原理：这个匿名函数用了外面函数的变量，外面函数的变量被常驻内存，有几个匿名函数，匿名函数中用的的这个变量就有多少个在内存，

             alert('您共点击了我'+counter+'次');

         }

         return increment

     }

    var countA=count();

    var countB=count()

    var countC=count()

     // function count() {

     //     var counter = 0;

     //     (function () {

     //         return(function(){

     //             counter += 1;

     //             alert('您共点击了我'+counter+'次');

     //         }

     //         )()

     //     })()

     // }

     </script>

 </body>

 </html>

js实现点击不同的按钮后各自返回被点击的次数的更多相关文章

  1. 【MFC】 点击不同的按钮后在界面同一位置显示不同的对话框内容（转）

    原文转自 http://bbs.csdn.net/topics/391039432 如图类似Tab控件的功能    但Tab控件按钮是固定的上下左右  不方便     所以想自己重新做个这种   我M ...

  2. 实现在点击asp:button按钮后,不刷新当前页面

    方法1:return false <asp:Button ID="Button1" runat="server" Text="Button&qu ...

  3. html和JavaScript，用户点击浏览器后退按钮，或者返回上一步自动刷新方式

    浏览器用户返回上一步,自动刷新 方式一. <input type="hidden" id="refreshed" value="no" ...

  4. php中点击下载按钮后待下载文件被清空

    在php中设置了文件下载,下载按钮使用表单的方式来提交 <form method="post" class="form-inline" role=&quo ...

  5. response 后刷新页面,点击按钮后，禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  6. elementui switch 开关，点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  7. WPF 点击Calendar后，需要点击两次按钮

    主面板上有一个Calendar控件,点击选择了日期后,如果点击确认按钮,需要点击两次.这个问题的解决方法如下:     private void calendar1_PreviewMouseUp(ob ...

  8. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. VS2010 使用时选择代码或双击时出错，点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

随机推荐

  1. vue2细节变化的用法

    1.v-el和v-ref合并为一个属性:ref 原来:v-el:my-element 现在: ref="myElement", v-ref:my-component 变成了这样:  ...

  2. nexus 搭建maven私服

    1. nexus 下载地址 https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.14.4-03-bundle.tar.g ...

  3. hdu 1233 还是畅通project (克鲁斯卡尔裸题)

    还是畅通project                                              Time Limit: 4000/2000 MS (Java/Others)    M ...

  4. 【hoj】2160 bin packing 二分、贪心

    这个题是在二分的题单上的,可是依据二分法写出来的会在oj上超时.依据题目以下给出的提示能够发现能通过贪心法每次都找最能满足的情况去填充每个包,这样就能保证使用的包的数量是最少的 二分法解法: #inc ...

  5. iOS动画之模拟音量振动条

    音量振动条 效果图: 假设实现? 创建3个layer.按顺序播放y轴缩放动画 利用CAReplicatorLayer实现 1.什么是CAReplicatorLayer? 一种能够复制自己子层的laye ...

  6. 点击事件-click,longclick

    今天在修改一个问题的时候,遇到了click,longclick事件触发情况.记录下来. 代码 tView.setOnLongClickListener(new OnLongClickListener( ...

  7. launcher- 第三方应用图标替换

    有时候我们感觉第三方应用的icon不美观,或者跟我们主题风格不一致,这时候我们希望换成我们想要的icon,那我们可以这么做(以更换QQ应用icon为例): 1.首先我们当然要根据自己的需要做一张替换i ...

  8. lightSlider 好图片轮播插件 支持移动端

    http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider https://github.co ...

  9. 洛谷 P1313 计算系数

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  10. 企业网管软件实战之看视频学装Cisco Works 2000

    650) this.width=650;" border="0" alt="125711349.jpg" src="http://img1. ...