在这段代码中，我使用localStorage，因为它们在所有平台和网络上都可用。
使用本地存储，您将获得更好的跨平台兼容性：
Localstorage 是数组，但每个元素中只能有字符串（使用 JSON 我们可以存储任何东西，不是递归的）。网络大约为 5MB。我想这对于移动应用程序来说是无限的。当用户关闭浏览器时，SessionStorage 被删除，我不确定它在移动设备上会如何做。
只是一个小的日期验证器......
Date.prototype.isValid = function(first_argument) {
if ( Object.prototype.toString.call(this) !== "[object Date]" )
return false;
return !isNaN(this.getTime());
}
从localStorage检索变量中的主要var声明
var timeout = null;
var maxlife = 5;
if (undefined === localStorage.life) {
localStorage.life = maxlife;
}
if (undefined === localStorage.date||localStorage.date=="") {
localStorage.date = "";
var date = null;
}else{
var date = new Date(Number(localStorage.date));
if(!date.isValid()){
date = null;
}
}
var timeoutTime = 5 * 60000;
var life = Number(localStorage.life);
失去生命，如果还没有，请设置日期。也设置一个超时并减去生命（并将其写入本地存储）。
function loseLife() {
if (null === date) {
date = new Date();
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime);
}
life--;
localStorage.life = life;
lives.innerHTML = life;
console.log(life);
}
添加生命，设置日期新日期或完全重置日期。如果需要，设置超时，并添加生命（并将其写入本地存储）。
function addLife() {
life++;
localStorage.life = life;
if (life < maxlife) {
date = new Date();
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime);
} else {
date = null;
localStorage.date = "";
}
lives.innerHTML = life;
}
在这里，您可能需要更改模糊（窗口不可见）和焦点（窗口再次可见）的挂钩。模糊只是清除超时，所以它不会打扰我们。
window.addEventListener('blur', function () {
clearTimeout(timeout);
});
这个函数检查它可以从现在和我们失去生命的日期的差异中减去我们获得生命所需的时间。
function tillNow(){
if (life < maxlife&&date!=null) {
var d = new Date();
var diff = d - date;
while (diff - timeoutTime > 0) {
diff = diff - timeoutTime;
if (life < maxlife) {
life++;
console.log("add");
}else{
date = null;
localStorage.date = "";
break;
}
}
localStorage.life = life;
if (life < maxlife) {
date = new Date((new Date()).getTime()-diff);
localStorage.date = date.getTime();
timeout = setTimeout(function(){addLife()}, timeoutTime-diff);
}
}
lives.innerHTML = life;
}
焦点只需调用tillNow()
window.addEventListener('focus', function () {
tillNow();
});
Onload 的作用与焦点相同，但最初用一个值填充 div...
window.onload=function(){
var lives = document.getElementById("lives");
lives.innerHTML = life;
tillNow();
}
Demo 抱歉不能做 codepen 的 jsFiddle，因为他们不喜欢本地存储。 （演示使用 15 秒作为计时器来获得新的生活；）我很不耐烦）