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. JavaScript学习总结(8)——JS实用技巧总结

    后退 前进 <!--<input type="button" value="后退" onClick="history.go(-1)&quo ...

  2. VPS搭建与IPv6使用教程

    VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...

  3. 17.Node.js 回调函数--异步编程

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...

  4. WPF 入门《常用控件》

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...

  5. Objc执行时读取和写入plist文件遇到的问题

    以下是本猫保持游戏NPC和物件交互的plist文件: 随着游戏和玩家逐步发生互动,玩家会改动人物和物件的交互的状态.这也是RPG游戏最主要的功能. 在切换每一个地图时须要将上一个地图发生的改变存储到p ...

  6. Node.js笔记(九)Nodejs与shell

    众所周知.Nodejs是单进程异步执行的.但不光是单进程,Nodejs也提供了多进程方面的支持 其创始人应该还是比較重视这一块的,最有力的证据就是child_process是Nodejs核心模块之中的 ...

  7. 关于C++中的内存泄露

    1.c++内存泄漏的定义: 内存泄漏(memory leak)是指由于疏忽或错误造成了程序未能释放掉不再使用的内存的情况.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,失 ...

  8. Android前后端交互细节--Json转化为对象的原理

    移动互联网用户基数越来越大,除了一些工具类(指南针.手电筒等)的应用,绝大部分APP都需要与后端进行交互. 交互的数据格式有JSON.XML等,由于JSON具有语法简单.占用空间小等优势,基本所有的公 ...

  9. C# foreach 循环遍历数组

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  10. Linux常用运维命令小结

    1. 空设备文件以及标准输入输出 /dev/null 表示空设备文件 0 表示stdin标准输入 1 表示stdout标准输出 2 表示stderr标准错误 2>&1 这里有两种解释:将 ...