html5中document新增了一个事件 visibilitychange

在html5中document新增了一个事件 visibilitychange,这个事件在页面前台或后台切换时被触发,它也有个对应的属性visibilityState,用于检测当前页面的状态值为hidden还是visible。

解法是,在hidden时记录当前时间,在visible时用当前时间减去之前记录的时间就为当前倒计时需要减去的时间,这也就不需要和后台沟通了,或者你直接在visible时刷新页面也行,下面是小样,测试一下

      var b=getTime();
         
      function getTime()
        {
            return Date.now();
         
        }
        document.addEventListener('webkitvisibilitychange',function()
        {
             
            if(document.webkitVisibilityState=='hidden')
            {
                b=getTime();
             
            }else
            {
                document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))
             
            }
        })
        document.addEventListener('mozvisibilitychange', function()
        {
            if(document.mozVisibilityState=='hidden')
            {
                b=getTime();
             
            }else
            {
                document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))
             
            }
        })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,198评论 6 13
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,232评论 0 1
  • 老板,两个人……可以,进来吗? 进来吧,雨那么大 他们两个曾经都是我的顾客,很长时间都是一个人光顾我的食堂,每次擦...
    Wendyzhen阅读 490评论 0 0
  • 两星期前去小草坝林场玩,看到成片的竹子到处生长,竹笋冒得到处都是,心动之,顺便挖了两颗带回家种。自古文人爱竹,清高...
    花生zfh阅读 620评论 0 1