如何检测非活动选项卡并用颜色填充它 [英] How to detect inactive tab and fill it with color

问题描述

如果标签处于非活动状态，如何用彩色填充网站？如果用户移动到另一个窗口，我想给我的网站提供类似屏幕效果的效果。我可以用jQuery做到吗？

How can I fill my website with color if tab is inactive? I would like to give screensaver like effect to my site if user move to another window. Can I do that with jQuery?

推荐答案

这里有一些基本代码可以帮助您：

Here is some basic code to get you going:

<script type="text/javascript"> 
document.onmousemove = resetTimer;
window.onload = function() {
    screenTimer = setTimeout(inactive, 2000);
}
function inactive(){
    // screen saver goes here
    document.body.style.backgroundColor = "black";
}
 function resetTimer(e) {
    // undo screen saver here
    document.body.style.backgroundColor = "white";
    // reset timer
    clearTimeout(screenTimer);
    screenTimer = setTimeout(inactive, 2000);
}
</script> 

使用jquery你可能会稍微清理一下，但这应该给一个简单的基础来建立起来。

Using jquery you could probably clean that up a bit, but this should give a simple foundation to build off of.

基本上，我们每隔2秒就会调用启动屏幕保护程序，但是如果你移动鼠标它会取消计时器并重新启动它。注意：setTimeout使用毫秒，因此1000 = 1秒。

Basically, we keep calling the "start screensaver" every 2 seconds, but if you move your mouse it cancels the timer and starts it over. Note: setTimeout uses milliseconds so 1000 = 1 second.

这篇关于如何检测非活动选项卡并用颜色填充它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！