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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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
php session安全问题分析
2011/06/24 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
javascript实现yield的方法
2013/11/06 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
js实现简单的验证码
2015/12/25 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python实现注册登录系统
2017/08/08 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python实发邮件实例详解
2019/11/11 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
学校课外活动总结
2014/05/08 职场文书
甜品店创业计划书
2014/09/21 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
出国签证在职证明范本
2014/11/24 职场文书
办公用房租赁协议书
2014/11/29 职场文书
道德模范事迹材料
2014/12/20 职场文书
生日赠语
2015/06/23 职场文书