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 27 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
Angularjs中使用轮播图指令swiper
May 30 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 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数组是否为空的代码
2011/09/08 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js canvas实现擦除动画
2016/07/16 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Django数据统计功能count()的使用
2020/11/30 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
20岁生日感言
2014/01/13 职场文书
《王二小》教学反思
2014/02/27 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Python读取和写入Excel数据
2022/04/20 Python