1. 首页
  2. IT资讯

JavaScript 按钮间隔指定时间再能点击

很多应用中,按钮不能够连续点击两次,也就是说按钮在点击一次后,就处于不能够用的状态。

隔指定的时间以后才能够再用,最典型的一个例子就是,手机验证码的发送。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  var count=60;
  var timer=null;
  obt.onclick=function(){
    var _that=this;
    _that.disabled=true;
    _that.value="还剩"+count+"可用";
    timer=setInterval(function(){
      if(count>0){
        count=count-1;
        _that.value="还剩"+count+"可用";
      }
      else{       
        _that.disabled=false;
        _that.value="查看效果";
        count=60;
        clearInterval(timer)
      }
    },1000)
  }
}
</script>
</head>
<body>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(2).var obt=document.getElementById(“bt”),获取按钮对象。

(3).var count=60,设置倒计时时间。

(4).var timer=null,声明此变量,作为定时器函数的标识。

(5).obt.onclick=function(){},为按钮注册点击事件处理函数。

(6).var _that=this,this是指向按钮对象,将按钮对象的引用赋值给变量_that,这是为了在以后的代码中随心所欲的使用按钮对象,应为this可能在其他的地方就不指向按钮对象。

(7)._that.disabled=true,将按钮设置为不可用。

(8)._that.value=”还剩”+count+”可用”,重新设置按钮的value属性值。

(9).timer=setInterval(function(){},1000),使用定时器函数进行倒计时。

(10).if(count>0){count=count-1;_that.value=”还剩”+count+”可用”;},如果count大于0,那么count的值就会每执行一次减一,然后再设置按钮的value属性值。

(11).else{_that.disabled=false;clearInterval(timer)},否则将按钮设置为可用,然后停止倒计时函数。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/197509.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code