在javascript中检查浏览器不活动

如果浏览器上没有任何活动4秒，我已写入JavaScript以提醒。如果没有浏览器事件，则会出现一个对话框询问是否扩展会话。如果4秒钟内没有事件，通知应该消失。如果用户点击continue session，那么应该重置计数器并检查不活动。代码如下。在页面加载时，它正常工作，但一旦有一些活动，此脚本不起作用。我哪里错了？在javascript中检查浏览器不活动

var countDownDate = dateAdd(new Date(), 4); 
 
var flag = false; 
 

 
var x = setInterval(function() { 
 
    callFun(countDownDate); 
 
}, 1000); 
 

 

 
var contin = function() { 
 
    flag = true; 
 
    document.getElementById("dialogBox").style.display = "none"; 
 
    document.getElementById("demo").style.display = "block"; 
 
} 
 

 
function dateAdd(date, units) { 
 
    var ret = new Date(date); 
 
    ret.setTime(ret.getTime() + units * 1000); 
 
    return ret; 
 
} 
 

 
var callFun = function(countDownDate) { 
 
    // Get todays date and time 
 
    var now = new Date().getTime(); 
 

 
    // Find the distance between now an the count down date 
 
    var distance = countDownDate - now; 
 

 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
    // Display the result in the element with id="demo" 
 
    document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; 
 

 
    // If the count down is finished, write some text 
 
    if (distance <= 0) { 
 
    document.getElementById("demo").style.display = "none"; 
 
    clearInterval(x); 
 
    document.getElementById("dialogBox").style.display = "block"; 
 

 
    } 
 
} 
 

 
$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) { 
 
    countDownDate = dateAdd(new Date(), 4); 
 
    flag = true; 
 
}); 
 

 
if (flag) { 
 
    var z = setInterval(function() { 
 
    alert('will logout now....'); 
 
    document.getElementById("dialogBox").style.display = "none"; 
 
    clearInterval(z); 
 
    }, 8000); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#main { 
 
    margin: 0px auto; 
 
    padding: 0px; 
 
    width: 900px; 
 
    position: relative; 
 
} 
 

 
pre { 
 
    background: #F8F8D2; 
 
    padding: 10px; 
 
    border: 2px solid #673E3E; 
 
    border-radius: 3px; 
 
    color: #222222; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="main"> 
 
    <p id="demo"></p> 
 
    <div id="dialogBox" style="display:none;"> 
 
     <h3>Do you want to be logged in?</h3> 
 
     <button value="Continue" onclick="contin();">Continue</button> 
 
     <button value="Logout">Logout</button> 
 
    </div> 
 

 

 
    </div> 
 
</body>

来源

2017-09-15 zilcuanu

希望下面的解决方案帮助。当显示对话框时，我再检查3秒钟的活动，如果没有活动，那么我打电话给logout函数。对contin，callFun和logout功能进行了更改。

var countDownDate = dateAdd(new Date(), 4); 
 
var flag = false; 
 
var idleInterval, buttonInterval; 
 

 
var x = setInterval(function() { 
 
\t callFun(countDownDate); 
 
}, 1000); 
 

 
var contin = function() { 
 
\t flag = true; 
 
\t document.getElementById("dialogBox").style.display = "none"; 
 
\t document.getElementById("demo").style.display = "block"; 
 
\t document.getElementById("demo").innerHTML = "0m 0s"; 
 
\t clearInterval(idleInterval); 
 
\t buttonInterval = setInterval(function() { 
 
\t \t callFun(countDownDate); 
 
\t }, 1000); 
 
} 
 

 
function dateAdd(date, units) { 
 
\t var ret = new Date(date); 
 
\t ret.setTime(ret.getTime() + units * 1000); 
 
\t return ret; 
 
} 
 

 
var callFun = function (countDownDate) { 
 
\t // Get todays date and time 
 
\t var now = new Date().getTime(); 
 

 
\t // Find the distance between now an the count down date 
 
\t var distance = countDownDate - now; 
 

 
\t var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
\t var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
\t // Display the result in the element with id="demo" 
 
\t document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; 
 

 
\t clearInterval(idleInterval); 
 

 
\t // If the count down is finished, write some text 
 
\t if (distance <= 0) { 
 
\t \t document.getElementById("demo").style.display = "none"; 
 
\t \t document.getElementById("dialogBox").style.display = "block"; 
 
\t \t clearInterval(x); 
 
\t \t clearInterval(buttonInterval); 
 
\t \t flag = false; 
 

 
\t \t idleInterval = setInterval(logOut, 3000); 
 
\t } 
 
} 
 

 
function logOut() { 
 
\t if (!flag){ 
 
\t \t console.log("Log out"); 
 
\t \t document.getElementById("dialogBox").style.display = "none"; 
 
\t \t clearInterval(idleInterval); 
 
\t } 
 

 
} 
 

 
$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function (x1) { 
 
\t countDownDate = dateAdd(new Date(), 4); 
 
\t flag = true; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<style> 
 
\t body { 
 
\t \t margin: 0px; 
 
\t \t padding: 0px; 
 
\t } 
 

 
\t #main { 
 
\t \t margin: 0px auto; 
 
\t \t padding: 0px; 
 
\t \t width: 900px; 
 
\t \t position: relative; 
 
\t } 
 

 
\t pre { 
 
\t \t background: #F8F8D2; 
 
\t \t padding: 10px; 
 
\t \t border: 2px solid #673E3E; 
 
\t \t border-radius: 3px; 
 
\t \t color: #222222; 
 
\t } 
 
</style> 
 

 
<div id="main"> 
 
\t <p id="demo"></p> 
 
\t <div id="dialogBox" style="display:none;"> 
 
\t \t <h3>Do you want to be logged in?</h3> 
 
\t \t <button value="Continue" onclick="contin();">Continue</button> 
 
\t \t <button value="Logout">Logout</button> 
 
\t </div> 
 
</div>

来源

2017-09-15 10:50:20

这部分工作。我还需要的是一旦对话框打开，如果没有任何活动，对话框也应该隐藏并调用注销功能。如果有任何活动或用户单击继续，则计时器必须重置。 – zilcuanu

@zilcuanu上面更新了我的解决方案。希望这可以工作。 –

好像你需要在你的“CONTIN”功能的新日期，再打电话给你“callFun”功能。

来源

2017-09-15 10:50:38 Q10

您忘记了在停止后重新开始间隔。

var countDownDate = dateAdd(new Date(), 4); 
 
var flag = false; 
 

 
var x = setInterval(function() { 
 
    callFun(countDownDate); 
 
}, 1000); 
 

 

 
var contin = function() { 
 
    flag = true; 
 
    document.getElementById("dialogBox").style.display = "none"; 
 
    document.getElementById("demo").style.display = "block"; 
 
    countDownDate = dateAdd(new Date(), 4); 
 

 
    var flag = false; 
 

 
    var x = setInterval(function() { 
 
    callFun(countDownDate); 
 
    }, 1000); 
 
} 
 

 
function dateAdd(date, units) { 
 
    var ret = new Date(date); 
 
    ret.setTime(ret.getTime() + units * 1000); 
 
    return ret; 
 
} 
 

 
var callFun = function(countDownDate) { 
 
    // Get todays date and time 
 
    var now = new Date().getTime(); 
 

 
    // Find the distance between now an the count down date 
 
    var distance = countDownDate - now; 
 

 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
    // Display the result in the element with id="demo" 
 
    document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; 
 

 
    // If the count down is finished, write some text 
 
    if (distance <= 0) { 
 
    document.getElementById("demo").style.display = "none"; 
 
    clearInterval(x); 
 
    document.getElementById("dialogBox").style.display = "block"; 
 

 
    } 
 
} 
 

 
$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) { 
 
    countDownDate = dateAdd(new Date(), 4); 
 
    flag = true; 
 
}); 
 

 
if (flag) { 
 
    var z = setInterval(function() { 
 
    alert('will logout now....'); 
 
    document.getElementById("dialogBox").style.display = "none"; 
 
    clearInterval(z); 
 
    }, 8000); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#main { 
 
    margin: 0px auto; 
 
    padding: 0px; 
 
    width: 900px; 
 
    position: relative; 
 
} 
 

 
pre { 
 
    background: #F8F8D2; 
 
    padding: 10px; 
 
    border: 2px solid #673E3E; 
 
    border-radius: 3px; 
 
    color: #222222; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="main"> 
 
    <p id="demo"></p> 
 
    <div id="dialogBox" style="display:none;"> 
 
     <h3>Do you want to be logged in?</h3> 
 
     <button value="Continue" onclick="contin();">Continue</button> 
 
     <button value="Logout">Logout</button> 
 
    </div> 
 

 

 
    </div> 
 
</body>

来源

2017-09-15 10:51:48

这部分工作。我还需要的是显示对话框后，应该有另一个计数器，它会隐藏对话框并在显示对话框后没有事件时调用注销功能，如果有任何活动，则应该隐藏对话框并且应该重置计数器。 – zilcuanu

在javascript中检查浏览器不活动

回答

相关问题