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>
标题为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;
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>