Question

我想在页面重定向和注销之前1分钟收到一条弹出警报（警告）消息。任何帮助，将不胜感激。谢谢。

(function() {
  var idleDurationSecs = 10 * 60;
  var redirectUrl = 'logout.asp'; // Redirect idle users to this URL
  var idleTimeout;

  var resetIdleTimeout = function() {
    if (idleTimeout) clearTimeout(idleTimeout);

    idleTimeout = setTimeout(function() {
      location.href = redirectUrl
    }, idleDurationSecs * 1000);
  };

  resetIdleTimeout();

  ['click', 'touchstart', 'mousemove'].forEach(function(evt) {
    document.addEventListener(evt, resetIdleTimeout, false)
  });
})();

Answer 1

我个人认为不需要警告，如果有警告，简单的警告可能还不够。倒计时的div最好。

但是，如果您设置为使用警报，则只需使用第二次超时即可。

var idleTimeout, warningTimeout;

var resetIdleTimeout = function () {
    clearTimeout(idleTimeout);
    clearTimeout(warningTimeout);

    warningTimeout = setTimeout(function () {
        alert("You will be logged out in 1 minute");
    }, (idleDurationSecs-60) * 1000);

    idleTimeout = setTimeout(function () {
        location.href = redirectUrl
    }, idleDurationSecs * 1000);
};

Answer 2

如果您想做一些质量更高的事情，这是我要做的代码片段。忽略CSS，我很无聊，看起来很漂亮。注意代码和HTML。

ul

amp-img

var n = 600; // 10 minutes

function countDown(){
var tm = setInterval(internalFunc,1000);
internalFunc();
       function internalFunc(){
         n--;
         if(n == 0){
            clearInterval(tm);
         }
          console.log(n);
          document.getElementById('ElementIDhere123').innerHTML = n;
          var date = new Date(null);
          date.setSeconds(n); // specify value for SECONDS here
          var result = date.toISOString().substr(11, 8);
          document.getElementById('ElementIDhere123').innerHTML = result;
       }
};

countDown();

自从您询问如何将时间设置为警报后，通知用户注销时间。

#ElementIDhere123{
background:-webkit-radial-gradient(circle farthest-corner at right center, rgb(0, 151, 126) 0%, rgb(23, 95, 104) 80%);
background:-o-radial-gradient(circle farthest-corner at right center, rgb(0, 151, 126) 0%, rgb(23, 95, 104) 80%);
background:-moz-radial-gradient(circle farthest-corner at right center, rgb(0, 151, 126) 0%, rgb(23, 95, 104) 80%);
background:radial-gradient(circle farthest-corner at right center, rgb(0, 151, 126) 0%, rgb(23, 95, 104) 80%);
border-radius:15px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
color:#C2F5FF;
text-align:center;
width: 90px;
}

注销前发出警告

2 个答案: