javascript设置连续两次点击按钮时间间隔的方法

本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法，分享给大家供大家参考。具体实现方法如下：

很多时候我们在实际应用中，可能并不希望按钮联系被不间断的点击，所以要限定一定的时间间隔才能够再次点击按钮，下面就通过代码实例介绍一下如何实现此功能，代码如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt");
  var count=0;
  var flag=null;
  function done(){
    if(count==0){
      clearInterval(flag);
    } 
    else{
      count=count-1;
    }
  }
  obt.onclick=function(){
    var val=parseInt(odiv.innerHTML);
    if(count==0){
      odiv.innerHTML=val+1;
      count=20;
      flag=setInterval(done,1000);
    }
    else{
      alert("还需要"+(count)+"秒才能点击");
    }
  }
}
</script>
</head>
<body>
<div id="thediv">0</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

以上代码实现了我们的要求，可以限制点击按钮的间隔时间，这一效果可以扩展到其他的功能中，比如限制发帖的间隔时间等等，下面就介绍一下它的实现过程。

代码注释如下:

1.window.onload=function(){}，规定文档内容完全加载完毕再去执行函数中的代码。
2.var odiv=document.getElementById("thediv")，获取div元素对象。
3.var obt=document.getElementById("bt")，获取按钮对象。
4.var count=0，声明一个变量并赋初值为0，它用来存储间隔时间。
5.var flag=null，声明一个变量并赋初值为null，此变量用来存储定时器函数的返回值。
6.function done(){}，此函数可以被定时器函数不断的调用，来对count进行递减。
7.if(count==0){clearInterval(flag);}，如果count==0，则停止定时器函数的执行。
8.else{count=count-1;}，如果不等于0，则进行减一操作。
9.obt.onclick=function(){}，为按钮注册点击事件处理函数。
10.var val=parseInt(odiv.innerHTML)，获取div中的内容，并转换为整数。
11.if(count==0){
  odiv.innerHTML=val+1;
  count=20;
  flag=setInterval(done,1000);
}
如果count等于0话饿，那么就将div中的内容+1，并且将count设置为20，同时开机定时器函数的执行。
12.else{alert("还需要"+(count)+"秒才能点击");},如果count不等于零，那么弹出还差多长时间可以点击。

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现禁止高频率连续点击的方法【基于ES6语法】

    本文实例讲述了JS实现禁止高频率连续点击的方法.分享给大家供大家参考,具体如下: 1.类似react的数据流,点击之后立即设置值为空,当返回值后才可以点击 2.设置定时器,每次进入之前先清空掉定时器,然后开启定时器 <main> <div id="me" style="width: 100px;height: 50px; margin: 5rem auto;background: blue;color: #fff">点我</div>

  • 关于javascript中限定时间内防止按钮重复点击的思路详解

    关于javascript中限定时间内防止按钮重复点击的思路详解

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比如1秒)防止按钮被重复点击的方法会不会更好一点呢? 思路一 最直接的思路可能就是点击按钮后,按钮的事件绑定函数解绑,1s后重新绑定函数 <button id="btn">0</button> <script> btn.onclick = function

  • JavaScript实现点击按钮后变灰避免多次重复提交

    注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击.下面是一个简单的例子: 复制代码 代码如下: <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> </head> <body> <input type="button" id="btn" val

  • JavaScript禁止用户多次提交的两种方法

    [当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> <script> //禁止默认行为 因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能 function preventDef(event){ event=event||window.event; if(event.preventDefault){ return even

  • ES6中Math对象新增的方法实例详解

    本文实例讲述了ES6中Math对象新增的方法.分享给大家供大家参考,具体如下: Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. 对于没有部署这个方法的环境,可以用下面的代码模拟. Math.trunc = Math.trunc || function(x) { return x < 0 ? Math.ceil(x) : Math.floor(x); }; Math.sign() Math.sign方法用来判断一个数到底是正数.负数.还是零. 对于没有部

  • JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt

    废话不多说了直接给大家贴代码了. 代码如下: <script language="JavaScript"> <!-- //js禁用某些键的代码 //www.jb51.net function key(){ if(event.shiftKey){ window.close();} //禁止Shift if(event.altKey){ window.close();} //禁止Alt if(event.ctrlKey){ window.close();} //禁止Ctr

  • js控制再次点击按钮之间的间隔时间可防止重复提交

    <script type="text/javascript" language="javascript"> var wait = 60; function change() { $o = $("#J_refresh_checkcode"); if(wait == 0) { $o.removeAttr("disabled"); $o.html("看不清?换一张"); wait = 60; } el

  • ES6数组的扩展详解

    本文实例讲述了ES6数组的扩展.分享给大家供大家参考,具体如下: 1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b', '2':'c', length:3 }; ES5我们可能都会这样写: var arr1=[].slice.call(arr); ES6可以把一个类数组转化为一个真正的数组 var arr2=Array.from(arr) 实际应用

  • js禁止页面刷新与后退的方法

    本文实例讲述了js禁止页面刷新与后退的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> //禁止用F5键 function document.onkeydown() { if ( event.keyCode==116) { event.keyCode = 0; event.cancelBubble = true; return false; } } //禁止右键弹出菜单 function document.onco

  • ES6正则的扩展实例详解

    本文实例讲述了ES6正则的扩展.分享给大家供大家参考,具体如下: 1. RegExp构造函数 ES5中,RegExp构造函数的参数: 参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) 参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝.但是,ES5不允许此时使用第二个参数,添加修饰符,否则会报错. ES6改变了这种行为.如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符.而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符

随机推荐