定时器实现点击重新发送信息倒计时显示 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="text"/>
 9 <button id="btn">点击发送短信</button>
10 </body>
11 </html>
12 <script>
13     var btn = document.getElementById("btn");
14     var count = 5;  // 数据的 10
15     var timer = null; // 定时器的名字
16     btn.onclick = function() {
17         clearInterval(timer);  // 先清除掉原来的定时器
18         // alert(11);
19         this.disabled = true;
20         //alert(this);  // this 指向的是 btn
21         var that = this;  // 把 btn 对象 给 that  var _this = this;
22         timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
23         function sendTextMessage() {
24             count--;
25             //this.innerHTML = "还剩余"+count+"秒";
26             // alert(this); // this 指向的是 定时器  window
27             //alert(that);
28             if(count >= 0 )
29             {
30                 that.innerHTML =  "还剩余"+count+"秒";
31             }
32             else
33             {
34                 that.innerHTML = "重新发送短信";
35                 that.disabled = false;
36                 clearInterval(timer);  // 清除定时器
37                 count = 5;
38             }
39 
40 
41         }
42 
43     }
44 </script>

 

posted @ 2017-12-28 22:20  前端极客  阅读(1088)  评论(0)  编辑  收藏  举报