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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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中的插件机制原理和实例
2014/07/08 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
常用js脚本
2006/12/03 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
JS实现随机点名器
2020/04/12 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python入门篇之函数
2014/10/20 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python中有趣在__call__函数
2015/06/21 Python
深入理解Python中的super()方法
2017/11/20 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python如何实现代码检查
2019/06/28 Python
为什么是 Python -m
2020/06/19 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
信息管理专业学生自荐信格式
2013/09/22 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
教师求职自荐信
2014/03/09 职场文书
《长相思》听课反思
2014/04/10 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
助学感谢信范文
2015/01/21 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python