JavaScript代码判断点击第几个按钮


Posted in Javascript onDecember 13, 2015

最近很轻松,项目结束,趁个空余时间写了一段javascript代码实现判断点击第几个按钮的相关代码,具体代码如下所示:

<html>
   <head>
     <meta charset='utf-'>
   </head>
   <body>
     <button>第一个</button>
     <button>第二个</button>
     <button>第三个</button>
     <button>第四个</button>
     <button>第五个</button>
     <script>
       var but=document.getElementsByTagName('button');
       for(i=;i<but.length;i++){
         but[i].setAttribute('i',i+);
         but[i].onclick=function(){
           b=this.getAttribute('i');
           alert('这是第'+b+'个按钮');
         }
       }
     </script>
   </body>
 </html>

 下面一段代码给大家介绍JavaScript实现点击按钮后,再过60秒后才能再次点击此按钮

 注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击。下面是一个简单的例子:

<html> 
<head> 
<title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> 
</head> 
<body> 
<input type="button" id="btn" value="免费获取验证码" /> 
<script type="text/javascript"> 
var wait=60; 
function time(o) { 
    if (wait == 0) { 
      o.removeAttribute("disabled");      
      o.value="免费获取验证码"; 
      wait = 60; 
    } else { 
      o.setAttribute("disabled", true); 
      o.value=wait+"秒后可以重新发送"; 
      wait--; 
      setTimeout(function() { 
        time(o) 
      }, 
      1000) 
    } 
  } 
document.getElementById("btn").onclick=function(){time(this);} 
</script> 
</body> 
</html>

以上是本文的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
JavaScript模块化开发之SeaJS
Dec 13 #Javascript
node.js require() 源码解读
Dec 13 #Javascript
JavaScript 模块的循环加载实现方法
Dec 13 #Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 #Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 #Javascript
详解JavaScript基于面向对象之继承
Dec 13 #Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 #Javascript
You might like
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python封装shell命令实例分析
2015/05/05 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python饼状图的绘制实例
2019/01/15 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
应届生骨科医生求职信
2013/10/31 职场文书
工程总经理工作职责
2013/12/09 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
公司业务员岗位职责
2014/03/18 职场文书
个人求职信范文
2014/05/24 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
小学生优秀评语
2014/12/29 职场文书
安全保证书格式
2015/02/28 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
500字作文之周记
2019/12/13 职场文书