js點擊按鈕倒計時setTimeout和setInterval

本文轉載自查看原文 2016-03-28 16:52 1820 JS

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 點擊按鈕倒計時點擊按鈕出現60秒倒計時，JS（按鈕）點擊按鈕出現60秒倒計時js代碼讓按鈕倒計時5秒以后才能再次點擊提交倒計時按鈕 js實現模擬自動點擊按鈕，並且在10秒倒計時之后瘋狂點擊 JS倒計時setTimeout為什么會出現誤差 setTimeout和setInterval的區別以及如何寫出效率高的倒計時 vue 點擊按鈕獲取60秒倒計時點擊按鈕，然后實現30S倒計時 js倒計時