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文件优化
Dec 08 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue 开发企业微信整合案例分析
Dec 02 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python使用正则筛选信用卡
2019/01/27 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python程序文件扩展名知识点详解
2020/02/27 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python 带时区的日期格式化操作
2020/10/23 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
语文教师求职信范文
2015/03/20 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
七年级作文之冬景
2019/11/07 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python