JavaScript代码判断点击第几个按钮

最近很轻松，项目结束，趁个空余时间写了一段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>

以上是本文的全部叙述，希望大家喜欢。

赞 (0)

相关推荐

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • js实现点击注册按钮开始读秒倒计时的小例子

    js 复制代码 代码如下: <script language="javascript"> <!-- var wait_time = 8; //设置秒数(单位秒) var secs_time = 0;          for(var i=1;i<=wait_time;i++) {  window.setTimeout("sTimer("+i+")",i*1000); } function sTimer(num) {  if

  • js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick="window.location='新页面'" 来实现. 1.在原来的窗体中直接跳转用 代码如下 window.location.href="你所要跳转的页面"; 2.在新窗体中打开页面用: 代码如下 window.open('你所要跳转的页面'); window.hist

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • JSP for循环中判断点击的是哪个按钮

    1.做留言板时,遇到数据库中for循环,判断点击的是哪个按钮的情况? 2.点击进入js方法 复制代码 代码如下: <script> function method(id){ alert(id); } </script> 复制代码 代码如下: <%for(User u:list){%> <input type="button" id=<%=u.getId() onclink="method('"<%=u.getId

  • JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: 复制代码 代码如下: <head runat="server"> <title>无标题页</title> <%-- <script type="text/javascript"> function openDia() { var returned = window.showModalDialog("Default4.aspx?" + (new Date()), windo

  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件.鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件.要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件.我们将事件处理程序封装成三个函数moveIn, moveOut, goTop; 下面先给出html/css代

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • JavaScript判断按钮被点击的方法

    废话不多说了,直接给大家贴代码了. firfox版: <HTML> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <HEAD> <TITLE></TITLE> <script> document.onclick=function(e){ var evt=e||window.event; var tar=

  • JavaScript代码判断点击第几个按钮

    最近很轻松,项目结束,趁个空余时间写了一段javascript代码实现判断点击第几个按钮的相关代码,具体代码如下所示: <html> <head> <meta charset='utf-'> </head> <body> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第

  • 借助javascript代码判断网页是静态还是伪静态

    最近一直在研究Dedecms,准备建站之前,就一直在想用不用伪静态,到现在还没有决定下来,想来想去,最好的办法还是看一看同类型的网站采用的是静态还是伪静态.那么我们打开一个网站,在基础知识不够的情况下,如何简单快速的判断出这个网页是静态还是伪静态呢?下面给大家来简单介绍一下: 伪静态和静态单从URL来看,很难分辨出来,一般网页后缀都是以.html结尾.我们可以借助一段简单的javascript代码判断一下: 首先说明这段javascript代码只能在IE里打开,用Chrome和Firefox无法

  • 通用javascript代码判断版本号是否在版本范围之间

    通用判断版本号是否在两者之间,也可以搭配判断是否大于某版本号,小于取反即可 PS:需确保版本规范一致,比如都是.号分割的n位版本号 var APP = {}; //判断指定版本是否在版本范围之间,需确保版本规范一致;比如 (..,..,..) APP.betweenVersion = function(curr,start,end,separator){ if(curr == start || curr == end){ return true; } var separator = separa

  • JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例

    代码如下: reg = /[~#^$@%&!?%*]/gi; if (reg.test(postdata.Name.trim())) { alert("姓名不能含有特殊字符"); } else { if (isEmojiCharacter(postdata.Name.trim())) { alert("姓名不能含有表情"); } else { //自己的代码 } } function isEmojiCharacter(substring) { for (va

  • JavaScript中判断原生函数检查function是否是原生代码

    我总是经常碰到需要检查某个function是否是原生代码的情况 -- 这是功能测试中一个很重要的内容: 函数是浏览器内置支持的,还是通过第三方类库模拟的.要检测这一点,最简单的办法当然是判断函数的 toString 方法返回的值啦. JavaScript代码 判断函数是否是原生方法其实相当简单: // 判断是否原生函数 function isNative(fn) { // 示例: // alert.toString() // "function alert() { [native code] }

  • JavaScript代码里的判断小结

    比较判断 比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件.JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别 严格相等运算符=== 判断 返回 两个值类型不同 false 两个值都是null/undefined/true/false true 两个值其中之一为NaN false 两个值都为数值且值相等 true 两个值都为字符串,且值相等 true 两个值都指向同一个引用类型 true 1 === "1" // false true

  • asp(JavaScript)自动判断网页编码并转换的代码

    完整的示例代码如下: 复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript自动判断网页编码并转换</titl

  • JavaScript 实现 Tab 点击切换实例代码

    JavaScript 实现 Tab 点击切换实例代码

    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换.滑动切换.延迟切换.自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果 1. 功能实现 html 部分 <button style="background-color:#f60; color: #fff;">按钮1</button> <button>按钮2</button> <button>按钮3<

  • JavaScript 中判断变量是否为数字的示例代码

    简介 JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型.实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据.如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型. 当我们期望一个变量是数字时,对字符串或数组进行操作可能会在代码中导致奇怪的结果.在本文中,我们将会介绍一些判断变量是否为数字的函数. 像"10"之类的数字的字符串不应被接受.在JavaScript中,诸如NaN,Infinity和-Infinity之类的特殊值也是数字类

随机推荐