倒计时效果、手机发送短信案例--Web前端定时器的使用

1.模仿京东秒杀倒计时案例分析：

 我增加了一个盒子，增加了剩余天数。

（1）这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）

（2）四个黑色盒子里面分别存放时分秒

（3）四个黑色盒子利用innerHTML 放入计算的小时分钟秒数

（4）第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

（5）最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>倒计时效果</title>
 8     <style>
 9         *{
10             margin:0;
11             padding:0;
12         }
13         div{
14             margin:200px;
15         }
16         span{
17             display:inline-block;
18             width:50px;
19             height: 50px;
20             background-color: #333;
21             color:#EEEEEE;
22             text-align:center;
23             line-height:50px;
24             font-size:16px;
25         }
26     </style>
27 </head>
28 <body>
29     <div>
30         <span class='day'>0</span>
31         <span class='hour'>1</span>
32         <span class='minute'>2</span>
33         <span class='second'>3</span>    
34     </div>
35     <script>
36         //获取元素
37         var day=document.querySelector('.day');
38         var hour=document.querySelector('.hour');
39         var minute=document.querySelector('.minute');
40         var second=document.querySelector('.second');
41         var inputTime=+new Date('2020-10-21 21:00');
42         countDown();//为了使打开页面马上看到倒计时而不是原本标签的内容先调用函数
43         setInterval(countDown,1000);//开启定时器
44         function countDown(){
45             //获取当前时间
46             var nowTime=+new Date();
47             //得到剩余秒数
48             var times=(inputTime-nowTime)/1000;
49             var d=parseInt(times/60/60/24);
50             d=d<10?'0'+d:d;
51             day.innerHTML=d;
52             var h=parseInt(times/60/60%24);
53             //补零操作，当剩余天数，时、分、秒小于10时，前面+0
54             h=h<10?'0'+h:h;
55             hour.innerHTML=h;
56             var m=parseInt(times/60%60);
57             m=m<10?'0'+m:m;
58             minute.innerHTML=m;
59             var s=parseInt(times%60);
60             s=s<10?'0'+s:s;
61             second.innerHTML=s;
62         }
63     </script>
64 </body>
65 </html>

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

2.发送短信案例分析:

（1）按钮点击之后，会禁用 disabled 为true

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

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

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

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

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发送短信案例</title>
</head>
<body>
    手机号码：<input type="number"> <button>发送</button>
</body>
<script>
    var btn=document.querySelector('button');
    var time=60;
    btn.addEventListener('click',function(){
        btn.disabled=true;
        var timer=setInterval(function(){
            if(time==0){
                clearInterval(timer);
                btn.disabled=false;
                btn.innerHTML='发送';
                time=60;
            }else{
                btn.innerHTML='剩余'+time+'秒';
                time--;
            }
        },1000);
    })
</script>
</html>

 

posted @ 2020-10-21 20:52  #Lorraine#  阅读(231)  评论(0)  编辑  收藏  举报