首页/ 填坑/ 文章详情

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

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!