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>

 

posted on 2016-03-28 16:52  我是一杯果汁  阅读(3102)  评论(0编辑  收藏  举报