如何檢測無效選項卡並用顏色填充

Question

如果選項卡處於非活動狀態，如何使用顏色填充我的網站？如果用戶移動到另一個窗口，我想給我的網站提供類似於屏幕保護程序的效果。我可以用jQuery來做到嗎？

Answer 1

下面是一些基本的代碼，讓你去：

<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你也許可以清理一下了一點，但是這應該給一個簡單的基礎建立過的。

基本上，我們每2秒鐘都會打電話給「啓動屏幕保護程序」，但如果您移動鼠標，它將取消定時器並啓動它。注意：setTimeout使用毫秒，因此1000 = 1秒。

Answer 2

使用window.onfocus（）和window.onblur（）方法 - 看http://www.thefutureoftheweb.com/demo/2007-05-16-detect-browser-window-focus/用於演示