限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动。限时秒杀短时效的限定会给予用户更强烈的紧迫感,让用户产生“机不可失,时不再来”的氛围,同时在数量上的限定,更能勾起用户的购买欲望。
作为消费者秒杀勿冲动,不要被主播的煽动性语言和“限时秒杀”等字眼冲昏了头脑,购物要保持冷静,避免冲动消费行为。
1.案例呈现
页面显示秒杀的产品图和秒杀结束剩余时间,每隔1秒钟,递减剩余时间,当剩余时间为0时,秒杀活动结束。案例在Chrome浏览器中运行效果,如图8-10所示。
图8-10 案例效果
2.案例分析
案例中,秒杀活动持续时间是1分钟。页面加载后,首先根据系统当前时间计算出秒杀的结束时间,然后开启定时器,将结束时间和当前时间相减,并转换成秒杀剩余的秒数;接着判断秒杀时间是否过期,若未过期,计算剩余的秒数;若已过期则停止秒杀的倒计时。最后,以两位数字的格式将剩余的时间显示在相应的位置。
3.案例实现
1 <div class="box">
2 <div id="s"></div>
3 </div>
4 <script>
5 var endtime = new Date(), endseconds = endtime.getTime() + 60 * 1000;
6 var s = 0;
7 var id = setInterval(function () {
8 var nowtime = new Date();
9 var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);
10 if (remaining > 0) {
11 s = parseInt(remaining % 60);
12 s = s < 10 ? '0' + s : s;
13 } else {
14 clearInterval(id);
15 s = '00';
16 }
17 document.getElementById('s').innerHTML = '距离本场秒杀结束还剩:'+ s + '秒';
18 }, 1000);
19 </script>
上述代码中,第5行代码根据系统当前时间计算出秒杀的结束时间;第7行代码开启定时器;第8-9行代码将结束时间和当前时间相减,并转换成秒杀剩余的秒数;第11-12行代码获取剩余的秒数并转换成两位数。第14行代码实现当秒杀活动结束时,停止定时器并将剩余秒数设置为“00”;第17行代码将剩余秒数显示在相应的位置。