用ifvisible插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ifvisible.js"></script>
<script type="text/javascript">
function d(el) {
return document.getElementById(el);
}
ifvisible.setIdleDuration(30);
ifvisible.on('statusChanged', function(e) {
d("result").innerHTML += (e.status+"<br>");
});
ifvisible.idle(function() {
d("result2").innerHTML = "(-_-) Good bye. ZzzZZzz...";
document.body.style.opacity = 0.5;
});
ifvisible.wakeup(function() {
d("result2").innerHTML = "(O_o) Hey!, you woke me up.";
document.body.style.opacity = 1;
});
ifvisible.onEvery(0.5, function() {
// Clock, as simple as it gets
var h = (new Date()).getHours();
var m = (new Date()).getMinutes();
var s = (new Date()).getSeconds();
h = h < 10? "0"+h: h;
m = m < 10? "0"+m: m;
s = s < 10? "0"+s: s;
// Update clock
d("result3").innerHTML = (h+':'+m+':'+s);
});
setInterval(function() {
var info = ifvisible.getIdleInfo();
// Give 3% margin to stabilaze user output
if (info.timeLeftPer < 3) {
info.timeLeftPer = 0;
info.timeLeft = ifvisible.getIdleDuration();
}
d("seconds").innerHTML = parseInt(info.timeLeft / 1000),
10;
d("idlebar").style.width = info.timeLeftPer+'%';
}, 100);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<h1>ifvisible.js test page</h1>
</div>
<div class="row-fluid">
<div class="span6">
<p class="lead">
空闲时间设置到<span id="idleTime" class="label label-warning">00 seconds</span>, 让你轻松地就可以看到效果。
<ul>
<li>尝试在标签之间切换或最小化窗口。并寻找事件日志</li>
<li>什么也不做，等待空闲时间来填补。计数器应该停止。</li>
<li>空闲时，尝试移动鼠标或按任意键。页面应该醒来</li>
</ul>
<div class="well">
如果您等待<span class="label label-warning" id="seconds">00</span>秒，我就睡觉了。
<div class="progress">
<div class="bar" id="idlebar" style="width: 0%;"></div>
</div>
<div id="result2">
(^_^) 嘿，你把我吵醒了。
</div>
</div>
<div class="well">
<br>
简单的时钟<span id="result3" class="badge badge-info">0</span> sThis 更新通过 <code>onEvery</code> 方法。它应该停止时，页面不活跃（闲置，隐藏）和页面激活时，应继续当前时间。
</div>
</div>
<div class="span6">
<div id="result">
<p>
Event log.
</p>
</div>
</div>
</div>
<script type="text/javascript">
var dur = (ifvisible.getIdleDuration() / 1000);
d('seconds').innerHTML = dur;
d('idleTime').innerHTML = dur + " seconds";
</script>
</div>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
