首页/ 填坑/ 文章详情

Javascript setinterval 移动端息屏,倒计时异常

双11来了,商家活动满天飞,线上影响到线下,一场盛大的购物狂欢节即将到来。预热活动比以往更提前了,电商平台活动更是花样百出,尽力的「劝说」你花光手里的钱,钱不够,花呗来凑,做个精致的自已。 

对于层出不穷的活动,倒计时抢购活动一直深受商家喜爱。限定的时间内,让买家觉的商家正在大甩卖中:营造商品数量稀少,价格优惠,时间紧迫,错过了又等一年的假象。许多人就是管不住自已手,明知道假的,偏偏轻易上了商家的贼船。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

在PC网页端,利用 setInterval() 函数,每隔 1000 秒刷新当前页面时间,极大的刺击买家的视觉感官司,诱发买家心中冲动购买的野兽。

setInterval() 函数制作倒计时活动,即简单,又实用。在移动端的崛起,活动已不仅仅只做PC端的活动,还要兼容移动端的活动。

倒计时活动虽然外表发生了变化,其核心思路万法不离宗,直接平移到移动端。奈何,移动端有其的特殊性:手机长时间静放,自动息屏。

问题就出在息屏后,倒计时显示的时间发生了错乱,一切变的不那么美好了。

JSvar remainTime = 100; //倒计时活动,剩余多少秒
var cacheTime = new Date.getTime();//程序进入后,缓存时间节点
setInterval(function () {
    var currTime = new Date.getTime()
    var vanishTimie = currTime - cacheTime; //获得消失的时间
    var newRemainTime = remainTime - vanishTimie/1000; //getTime(),获取的毫秒
    console.log('newRemainTime',newRemainTime);
    //do somthing
}, 1000)

通过 cacheTime  与 currTime 相减,获取已经消失的时间;  remainTimevanishTimie 再次相减,获得最终的剩余时间。

除了使用时间节点相减,获取时间差,还可以利用 ajax 异步请求,向服务器获取最新的数据。两者各有利弊,如何使用,请根据场景需求,做出合理的选择。

文章评论0 records

最新 最早

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...