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. 关于SQL分页存储过程的分析

    建 立一个 Web 应用,分页浏览功能必不可少.这个问题是数据库处理中十分常见的问题.经典的数据分页方法是:ADO 纪录集分页法,也就是利用ADO自带的分页功能(利用游标)来实现分页.但这种分页方法仅 ...

  2. C#开发 —— 泛型，文件

    泛型的目标是采用广泛适用和可交互性的形式来表示算法和数据结构 —— 参数化 泛型能子啊编译时提供强大的类型检查,减少数据类型之间的显式转换,装箱操作和运行时的类型检查 泛型的类型参数T可以被看作是一个 ...

  3. OpenCV —— 写入AVI视频文件

    打开视频文件,对每一帧进行极坐标变换,然后将转换生成的图像序列写入视频文件中 #include "cv.h" #include "highgui.h" int ...

  4. [lougu2243]双端队列搜索

    正统双端队列搜索 回顾:普通队列进行边权为定值的最短路 每次到达都是最优的(意味着不用取min) why? 因为所有状态按照 入队的先后顺序 具有 层次单调性,每次扩展,都往外走一步,满足从起始到该状 ...

  5. centos6.5下 python3.6安装、python3.6虚拟环境

    https://www.cnblogs.com/paladinzxl/p/6919049.html # python3.6的安装 wget https://www.python.org/ftp/pyt ...

  6. ANSI-X99MAC算法和PBOC的3DES MAC算法

    仅仅要有标准的DES加密和解密算法.类似ANSI-X99MAC算法和PBOC3DES算法就非常好实现.他们都是用DES算法再经过一层算法实现的.实现原理看图就能看明确.3DES算法实现就更简单了.就是 ...

  7. zenDiscovery和master选举

    上一篇通过 ElectMasterService源码,分析了master选举的原理的大部分内容:master候选节点ID排序保证选举一致性及通过设置最小可见候选节点数目避免brain split.节点 ...

  8. 1.22 Python基础知识 - 正则表达式

    Python正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re ...

  9. 利用日志使管理Linux更轻松

    利用日志使管理Linux更轻松 操作系统的日志主要具有审计与监测的功能,通过对日志信息的分析,可以检查错误发生的原因,监测追踪入侵者及受到攻击时留下的痕迹,甚至还能实时的进行系统状态的监控.有效利用日 ...

  10. numpy_basic2

    # 六.numpy的常用函数 1. 读取文件 逻辑上可被解释为二维数组的文本文件: 数据项1<分隔符>数据项2<分隔符>...<分隔符>数据项n numpy.loa ...