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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JS宝典学习笔记(下)
Jan 10 Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript运算符小结
Jun 03 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 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&amp;java(二)
2006/10/09 PHP
其他功能
2006/10/09 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP类的特性实例分析
2016/09/28 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript数组详解
2014/10/22 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python实现从ftp服务器下载文件
2020/03/03 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
实习单位推荐信
2015/03/27 职场文书
同学聚会通知书
2015/04/20 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript