zoukankan html css js c++ java

js点击按钮倒计时setTimeout和setInterval

setTimeout()

用于在指定的毫秒数后调用函数或计算表达式，只执行 code 一次。

setInterval()

可按照指定的周期（以毫秒计）来调用函数或计算表达式，不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

代码实现如下

HTML部分

1 <body>
2 <div class="wrap">
3     <input type="tel" class="shuru" id="phone"/>
4     <button class="btn" id="send">发送</button>
5 </div>
6 </body>

1.setTimeout实现

标题为JSFidder的链接，js部分代码如下

 1 var wait=60;
 2 function time(){
 3     var btn=document.getElementById("send");
 4     var str=btn.innerText;
 5     if(wait==1){
 6         btn.innerText="再次发送";
 7         btn.removeAttribute("disabled");
 8         wait=60;
 9     }else{
10         wait--;
11         btn.innerText=wait+"s后重新获取";
12         btn.setAttribute("disabled",true);
13        setTimeout(function(){
14            time();
15        },1000);
16     }
17 }
18 //点击button触发
19 document.getElementById("send").onclick=time;

2.setInterval实现

js部分代码如下

 1 <script type="text/javascript">
 2 function time(){
 3     var wait=60;
 4     var btn=document.getElementById("send");
 5     btn.setAttribute("disabled",true);
 6     var timer=setInterval(function(){
 7         if(wait==1){
 8             btn.innerText="再次发送";
 9             btn.removeAttribute("disabled");
10             wait=60;
11             clearInterval(timer);
12         }else{
13             wait--;
14             btn.innerText=wait+"s后重新获取";
15         }
16     },1000)
17 }
18 document.getElementById("send").onclick=time;
19 </script>

查看全文

相关阅读:
Poj1163 The Triangle(动态规划求最大权值的路径)
Poj1258_Agri-Net(最小生成树)
Poj1258_Agri-Net(最小生成树)
Poj1218_THE DRUNK JAILER(水题)
Poj1218_THE DRUNK JAILER(水题)
Poj1298_The Hardest Problem Ever(水题)
Poj1298_The Hardest Problem Ever(水题)
Poj1012_Joseph
Poj1012_Joseph
Poj_1008--Maya Calendar

原文地址：https://www.cnblogs.com/yiguozhi/p/5329673.html