发送短信案例

案例分析：

1.按钮点击之后，会禁用按钮，disabled为true；

2.同时按钮里面的内容会变化，注意button按钮里面的内容通过innerHTML修改；

3.里面的秒数是有变化的，因此需要用到定时器；

4.定义一个变量，在定时器里面，不断递减；

5.如果变量为0，说明时间到了，我们需要停止定时器，并且复原按钮初始状态。

效果展示：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>发送短信案例</title>
 6         <style>
 7             body{
 8                 margin: 200px 400px;
 9             }
10         </style>
11     </head>
12     <body>
13         手机号码：<input type="number"> <button>发送</button>
14         <script>
15             var btn = document.querySelector('button');
16             var time = 5;
17             btn.addEventListener('click',function(){
18                 btn.disabled = true;
19                 var timer = setInterval(function(){
20                     if(time == 0){
21                         //清除定时器
22                         clearInterval(timer);
23                         //复原按钮
24                         btn.disabled = false;
25                         btn.innerHTML = '发送';
26                         //time需要重新开始，可以执行下一次
27                         time = 5;
28                     }else{
29                         btn.innerHTML = '还剩下' + time + '秒';
30                         time--;
31                     }   
32                 },1000)
33             })
34         </script>
35     </body>
36 </html>

posted on 2020-05-21 10:17 SailorM 阅读(173) 评论(0) 编辑收藏举报