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>