js倒计时 手机休眠时 时间不进行减少
http://www.111cn.net/wy/js-ajax/94218.htm
手机版网页js倒计时存在的问题与解决的方法
在手机版网页中做倒计时（使用服务端时间来倒计时）我们需要考虑到两个问题：1、避免频繁的取服务端时间，2、手机处于锁屏状态或者浏览器/页面在后台运行对倒计时的处理；围绕这两个问题说说我的解决方法（小 虾虎 鱼原创）。
一、服务端时间的获取方法
实现倒计时功能，我们必须要知道剩余时间，知道剩余时间就必须要知道当前时间（服务器时间）和结束时间。 服务器时间和结束时间可以通过两种方式获得：
后端直接在视图中输出；
通过ajax去获取；
为了减少http请求我选择第一种方式，将结束时间和服务端时间直接在视图中输出，如：
<head>
<script>
var servertime = '2015-4-10 09:32:17';
var endtime = '2015-4-12 09:00:00';
</script>
</head>
得到两个时间之后，结束时间endtime是一直不变的，但服务器时间servertime是一直在变的，而我们只得到了一次服务器时间，这时我们需要实现如何与服务器时间同步，我们可以这样做： 在页面打开时我同时记录这一刻的时间，并将这时间保存到一个变量instant中，然后在页面打开后的任一时间想得到服务端的时间可以通过当前本地的时间减去instant的时间再加上servertime时间，即：Date.now() - instant + servertime，我们将下面的js代码放到html页面中的head中（放到head中instant与servertime是同时定义可以减少误差）：
var servertime = '2015-4-10 09:32:17';
var endtime = '2015-4-12 09:00:00';
var instant = 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倒计时的两个问题得到了解决。
http://www.jianshu.com/p/ed46926a392c
[JavaScript] visibilitychange事件
visibilitychange事件是浏览器新添加的一个事件，
当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，
现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。
document.addEventListener("visibilitychange", function(){
alert();
}, false);现在某些浏览器还保留了visibilitychange的前缀，
例如Chrome浏览器还保留着webkit前缀，
不过该事件已经趋于稳定，在Chrome 33及以后就去掉了前缀，
直接使用visibilitychange
注：
（1）微信内置的浏览器因为没有标签，所以不会触发该事件。
（2）手机端直接按Home键回到桌面，也不会触发该事件。
（3）PC端浏览器失去焦点不会触发该事件，但是最小化，或回到桌面会触发。
http://www.51xuediannao.com/html5/visibilitychange.html
当前窗口获得焦点js事件【visibilitychange】
当前窗口获得焦点js事件，html5发布之前我们使用window.onfocus和window.onblur来获得窗口焦点和失去窗口焦点，
监听 onfocus() 和window.onblur()事件实现
//当前窗口得到焦点
window.onfocus = function() {
//播放动画或视频
};
//当前窗口失去焦点
window.onblur = function() {
//暂停动画或视频
};
这个方法可以实现切换标签暂停动画视频，但是会带来一个问题，由于是判断焦点，如果是在当前页面上铺上一个小窗口，那当前页面就暂停了动画，试想，如果你一边看片，一边开个聊天窗口与MM聊天，当你操作聊天窗口的时候，视频暂停了，这并不是你想要的效果。
现在我们来看看HTML5是怎么解决的。H5 提供了很多简单实用的 API，Page Visibility API 就是其中之一。 Page Visibility API能有效的帮助我们完成这样的判断。
使用html5的Page Visibility API来实现
这个 API 本身非常简单，由以下三部分组成。
document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。
document.visibilityState：表示下面 4 个可能状态的值
hidden：页面在后台标签页中或者浏览器最小化
visible：页面在前台标签页中
prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded：页面正在从内存中卸载
Visibilitychange事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。
这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
// 动画视频暂停
} else {
// 动画视频开始
}
});
结合demo中的实例，切换标签或者最小化的时候，demo中的视频会暂停，恢复当前页面时，demo中的视频会继续播放。完整的代码如下：
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// 如果页面被隐藏，则暂停播放，如果页面恢复，则继续播放
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// 判断浏览器的支持情况
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
consol.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// 监听visibilityChange事件
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// 当播放器暂停的时候，将页面标题设置为：Paused.
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// 当播放器正常播放时，将页面标题设置为：Playing.
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
js倒计时 手机休眠时 时间不进行减少的更多相关文章
- js 倒计时（可自定义时间）
<html> <head> <title>js 倒计时</title> </head> <body> <div> & ...
- js倒计时demo 天/时/分/秒
<html><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> ...
- 原生js倒计时和显示当前时间
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 倒计时功能，获取当前时间的年月日，时分秒
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
- js倒计时-倒计输入的时间
计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- JS倒计时两种种实现方式
最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...
- 腾讯云短信服务+Node.js给手机发送验证码
最近公司需要些一个登陆验证和修改密码验证,需要用到验证码,我用Node.js写了一个给手机发验证码的代码,下面实现的功能有:生产验证码,(计时器)验证码失效时间,给手机发送短信. 首先看官方文档,在给 ...
- JS倒计时两种种实现方式 很不错
最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...
随机推荐
- （转）SQLite数据库的加密
1.创建空的SQLite数据库. //数据库名的后缀你可以直接指定,甚至没有后缀都可以 //方法一:创建一个空sqlite数据库,用IO的方式 FileStream fs = File.Create( ...
- Mysql 开窗函数实战
Mysql 开窗函数实战 Mysql 开窗函数在Mysql8.0+ 中可以得以使用,实在且好用. row number() over rank() over dense rank() ntile() ...
- RF（作用与目的）
1.robotframework 自动化原理 通过 ride 工具编写脚本,加载指定的 UI 测试库,再通过 pybot 程序去运行指定脚本,调用浏览器驱动,打开浏览器,操作浏览器页面元素,达到模拟用 ...
- 编写简单的内核模块及内核源码下载，内核模块Makefile编写
CentOS的内核源码默认是没有下载的,需要自己下载,首先安装linux的时候就应该知道linux的版本,我装的是Centos7的 下面查一下内核的版本,使用下面的命令 [scut_lcw@local ...
- ubuntu 使用 vsftpd 基于系统用户配置相互隔离的 ftp (ftps) 服务
我们在日常使用 UbuntuServer 服务器时,经常会直接使用基于 ssh 的 sftp 连接服务器直接进行文件上传和下载,不过这个方式其实有一定的安全隐患,当一个团队有多个人员,需要连接服务器 ...
- Unity 游戏框架搭建 2019 (四十二、四十三) MonoBehaviour 简化 & 定时功能
MonoBehaviour 简化 在前两篇,我们完成了第九个示例.为了完善第九个示例,我们复习了类的继承,又学习了泛型和 params 关键字. 我们已经接触了类的继承了.接触继承之前,把类仅仅当做是 ...
- C++ 函数重载，函数模板和函数模板重载，选择哪一个？
重载解析 在C++中,对于函数重载.函数模板和函数模板重载,C++需要有一个良好的策略,去选择调用哪一个函数定义(尤其是多个参数时),这个过程称为重载解析. (这个过程将会非常复杂,但愿不要遇到一定要 ...
- JavaScript toFixed() 实现四舍五入保留两位小数
const num = 18.186; let result; result = num.toFixed(2) console.log(result) // 18.19 注意,返回值为String类型
- 聊聊算法——BFS和DFS
如果面试字节跳动和腾讯,上来就是先撕算法,阿里就是会突然给你电话,而且不太在意是周末还是深夜, 别问我怎么知道的,想确认的可以亲自去试试.说到算法,直接力扣hard三百题也是可以的,但似乎会比较伤脑, ...
- 软路由OpenWrt（LEDE）2020.5.10更新 UPnP+NAS+多拨+网盘+DNS优化
近期更新:2020.05.10更新-基于OpenWrt R2020.5.9版本,源码截止2020.05.10. 交流群:QQ 1030484865 电报 t.me/t_homelede 版本说 ...