实现限时秒杀案例

1.在淘宝网中，商家为了促销经常搞一些活动，例如限时秒杀是常见的一种活动，来增加消费者购买商品。

2.实现限时秒杀案例，具体代码如下所示：

HTML

1. <div class="box"> 
2.             <div style="width:190px">距离5/20号限时秒杀还有</div> 
3.             <div id="day"></div>  
4.             <div id="hour"></div>  
5.             <div id="minute"></div> 
6.             <div id="second"></div>  
7.         </div> 

在上面代码中，id为day、hour、minute、second分别表示剩余的天数、小时、分钟、秒数。

CSS

1. *{ 
2.                 margin: 0; 
3.                 padding: 0; 
4.             } 
5.             .box { 
6.                 width: 702px; 
7.                 height: 378px; 
8.                 display: flex; 
9.                 flex-direction: row; 
10.                 align-items: center; 
11.                 justify-content: center; 
12.                 text-align: center; 
13.                 border: 1px solid #000; 
14.             } 
15.  
16.             .box div { 
17.                 display: flex; 
18.                 color: royalblue; 
19.                 width: 50px; 
20.                 height: 50px; 
21.                 border: 1px solid #ccc; 
22.                 align-items: center; 
23.                 justify-content: center; 
24.             } 

在上面代码中，使用弹性布局display：flex，用于盒子模型提供很大的一个灵活性。

flex-direction属性表示控制主轴的方向，row表示水平方向。

justify-content属性表示项目在主轴上的对齐方式，center表示中间。

align-items属性表示项目在交叉轴上对齐方式，center表示中间。

JavaScript

1. //设置秒杀结束时间 
2.             var endTime = new Date('2021', '4', '20'); //指定日期 
3.             var endSec = endTime.getTime(); //指定日期的毫秒数 
4.  
5.             // 声明变量保存剩余的时间 
6.             var d = h = m = s = 0; 
7.             // 设置定时器，实现限时秒杀效果 
8.             var id = setInterval(show, 1000); 
9.  
10.             function show() { 
11.                 var nowtime = new Date(); // 获取当前时间 
12.                 // 获取时间差，单位秒 
13.                 var gain = parseInt((endSec – nowtime.getTime()) / 1000); 
14.                 // 判断秒杀时间是否到期 
15.                 if (gain > 0) { 
16.                     // 计算剩余天数 
17.                     d = parseInt(gain / (60*60*24));  
18.                     // 计算剩余小时 
19.                     h = parseInt((gain / (60*60)) % 24);  
20.                     // 计算剩余分钟 
21.                     m = parseInt((gain / 60) % 60);  
22.                     // 计算剩余秒 
23.                     s = parseInt(gain % 60);  
24.                 } else { 
25.                     clearInterval(id); // 清除定时器 
26.                     d = h = m = s = '00'; 
27.                 } 
28.                 // 将剩余的天、小时、分钟、秒显示在网页中 
29.                 document.getElementById('day').innerHTML = d + '天'; 
30.                 document.getElementById('hour').innerHTML = h + '时'; 
31.                 document.getElementById('minute').innerHTML = m + '分'; 
32.                 document.getElementById('second').innerHTML = s + '秒'; 
33.             } 

在上面代码中，首先是创建秒杀结束时间，利用Date对象的getTime()方法分别获取结束秒杀的时间和当前时间的毫秒数。判断秒杀时间是否到期，如果没到期，计算剩余天数、小时、分钟、秒数。如果到期清除计时器。

使用document.getElementById()方法根据指定的Id对象插入相应的内容。