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实现自定义弹窗示例
Mar 12 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue使用nprogress实现进度条
Dec 09 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
非常实用的php验证码类
2016/05/15 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php实现图片压缩处理
2020/09/09 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js转义字符介绍
2013/11/05 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Python如何急速下载第三方库详解
2020/11/02 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
职位说明书范文
2014/05/07 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
公务员政审材料范文
2014/12/23 职场文书
德能勤绩工作总结
2015/08/11 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫