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 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
JS实现滑动导航效果
Jan 14 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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 工程的办法
2006/12/03 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
python如何创建TCP服务端和客户端
2018/08/26 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Django自带的用户验证系统实现
2020/12/18 Python
python中四舍五入的正确打开方式
2021/01/18 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
英文简历中的自我评价用语
2013/12/09 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
大学旷课检讨书
2014/01/28 职场文书
运动会通讯稿150字
2014/02/15 职场文书
营销与策划实训报告
2014/11/05 职场文书
2014年商场工作总结
2014/11/22 职场文书
入党积极分子考察意见
2015/06/02 职场文书
蜗居观后感
2015/06/11 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
防震减灾主题班会
2015/08/14 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android