手机版网页js倒计时存在的问题与解决的方法

在手机版网页中做倒计时(使用服务端时间来倒计时)我们需要考虑到两个问题:1、避免频繁的取服务端时间,2、手机处于锁屏状态或者浏览器/页面在后台运行对倒计时的处理;围绕这两个问题说说我的解决方法(小 虾虎 鱼原创)。

一、服务端时间的获取方法

实现倒计时功能,我们必须要知道剩余时间,知道剩余时间就必须要知道当前时间(服务器时间)和结束时间。 服务器时间和结束时间可以通过两种方式获得:

后端直接在视图中输出;

通过ajax去获取;

为了减少http请求我选择第一种方式,将结束时间和服务端时间直接在视图中输出,如:

    varservertime ='2015-4-10 09:32:17';varendtime ='2015-4-12 09:00:00';   

得到两个时间之后,结束时间endtime是一直不变的,但服务器时间servertime是一直在变的,而我们只得到了一次服务器时间,这时我们需要实现如何与服务器时间同步,我们可以这样做: 在页面打开时我同时记录这一刻的时间,并将这时间保存到一个变量instant中,然后在页面打开后的任一时间想得到服务端的时间可以通过当前本地的时间减去instant的时间再加上servertime时间,即:Date.now() - instant + servertime,我们将下面的js代码放到html页面中的head中(放到head中instant与servertime是同时定义可以减少误差):

varservertime ='2015-4-10 09:32:17';varendtime ='2015-4-12 09:00:00';varinstant =Date.now();

最后我们通过Date.now() - instant + servertime计算时间差来实现倒计时。

【注意】使用此方法会存在以下问题:

如果客户端的时间被修改,那么得到的服务端时间就不正确;

如果网络环境差也会造成一定的误差;

二、设备锁屏或浏览器/页面后台运行的影响

如果设备处于锁屏或者浏览器/页面处于后台运行状态过一段时间再返回到页面,会发现倒计时慢了(具体原因我不知道,有可能浏览器处于休眠状态导致JS的执行暂停,纯属猜测),这时我们需要对倒计时进行校正,对于这个问题我也有两种解决方法:

使用定时器隔一段时间自动校正一次;

使用visibilitychange事件来监听document的隐藏状态,即查看document.hidden值,false为页面显示,true为页面隐藏:

document.addEventListener("visibilitychange",function(e){if(!e.path[0].hidden){// e.path为页面中document的集合// 校正倒计时的代码...} },false);

第一种方法随可行但有一定的弊端,建议使用第二种方法。

至此,手机版网页js倒计时的两个问题得到了解决。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容