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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
谈一谈javascript闭包
Jan 28 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
vue实现弹幕功能
Oct 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简单随机字符串生成方法示例
2017/04/19 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
Angular实现响应式表单
2017/08/04 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python中for循环详解
2014/01/17 Python
跟老齐学Python之复习if语句
2014/10/02 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python模拟Django框架实例
2016/05/17 Python
python实现日常记账本小程序
2018/03/10 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
行政助理岗位职责范本
2015/04/11 职场文书
银行催款通知书
2015/04/17 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
联欢会开场白
2015/06/01 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Python之matplotlib绘制饼图
2022/04/13 Python