javascript设置三番五次三次点击按键时间间隔的法

2019-07-25 08:45栏目:WRB前端

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

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

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

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

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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程序设计有所帮助。

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

android 怎得到连续两次单击button的时间间隔

给按钮添加OnTouchListener,实现onTouch(View v, MotionEvent event) 方法,再利用event.getAction()和event.getEventTime(),可分别获得手指动作及事件发生的毫秒值。两次单击的时间间隔即为两次MotionEvent.ACTION_UP动作之间的毫秒值差  

复制代码 代码如下:

javascript 怎获得两次键盘输入的时间间隔,两次输入超过1秒才发送

var oldTime=0;
function check(){
var now=new Date().getTime();
var flag=0;
if(now-oldTime>1000)
flag=1
oldTime=now;
return flag;
}  

本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//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程序设计有所帮助。

您可能感兴趣的文章:

  • 关于javascript中限定时间内防止按钮重复点击的思路详解
  • js控制再次点击按钮之间的间隔时间可防止重复提交
  • JavaScript实现点击按钮后变灰避免多次重复提交
  • JavaScript禁止用户多次提交的两种方法
  • JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
  • js禁止页面刷新与后退的方法
  • ES6数组的扩展详解
  • ES6中Math对象新增的方法实例详解
  • ES6正则的扩展实例详解
  • JS实现禁止高频率连续点击的方法【基于ES6语法】

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:javascript设置三番五次三次点击按键时间间隔的法