Question

我已经设置了基于重定向或者不是用户在页面上是否处于活动状态。感谢this tutorial我有99％的工作。只有一个我坚持的功能。

JS是Google Chrome扩展程序的一部分。

在页面上停用2秒后会弹出重定向警告，如果在5秒内没有其他活动，则会将该页面重定向到google.com（仅使用google.com进行测试）。

重定向到google.com后，计时器会在2秒后重新开始 - 我不想要这个。

我只想让用户在google.com上有效时启动计时器（即触摸屏幕）。

我是否需要在某处添加额外的stopTimer函数？

我基本上希望计时器位于主页之外的每个页面上（在本例中为google.com）。

到目前为止我的代码 - 我创建了一个JS Fiddle;

谷歌重定向在JS小提琴中不起作用，但在我的实时环境中有效。

var div = document.createElement("div");
div.style.display = "none";
div.style.height = "18em";
div.style.width = "30em";
div.style.marginTop = "-9em";
div.style.marginLeft = "-15em";
div.style.background = "#f2dede";
div.style.color = "black";
div.style.position = "absolute";
div.style.padding = "20px";
div.style.top = "50%";
div.style.left = "50%";
div.style.border = "5px solid #ebccd1";
div.style.borderRadius = "20px";
div.style.textAlign = "center";
div.style.zIndex = "9999";
document.body.appendChild(div);

var timeoutID;
var timerID;
var idleTimeout = 5; 
var idleSecondsTimer = null;
var idleSecondsCounter = 0;

function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);

    startTimer();
}
setup();

function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = setTimeout(goInactive, 2000);
}

function resetTimer(e) {
    clearTimeout(timeoutID);
    clearTimeout(timerID);    
    goActive();
}

function stopTimer(e) {
    window.clearTimeout(timeoutID);
}

function goInactive() {
    idleSecondsCounter = 0;

    div.style.display = "block";
    div.innerHTML = "<strong>Inactivity detected.</strong> <p>Redirecting in <span id='countdown'>" + (idleTimeout - idleSecondsCounter) + " </span> seconds. <p>Please touch screen to cancel.";
    // show a count down here then redirect to google.com

    timerID = setInterval(function(){ 
        idleSecondsCounter++; 

        if(idleSecondsCounter >= 6) {
            clearTimeout(timerID);      
            window.location.href = "http://google.com";
        } 
        else {            
            document.getElementById("countdown").innerHTML = (idleTimeout - idleSecondsCounter);
        }
    }, 1000);    
}

function goActive() {
    div.style.display = "none";
    startTimer();
}

我上面使用的时间用于测试目的，将在现场环境中增加。

任何帮助都将不胜感激。

Answer 1

setup()执行时，您的计时器会在页面加载时无条件启动。

如果您只希望在某些活动后启动它，只需从您的startTimer()代码中删除setup() - 您将调用resetTimer将启动该过程的任何活动

Javascript定时重定向

1 个答案: