JavaScript倒计时弹出窗口

Question

我正在尝试制作一个包含 javascript 计时器弹出窗口的 div，它会在 2 秒不活动后弹出，然后在再次事件时消失。

我想我快到了，我已经创建了一个 jsfiddle用我的一些代码。

事件和非事件事件有效(即弹出和隐藏)- 我只是不知道如何让倒数计时器出现在 div 中。然后理想情况下，当计时器达到 0 时 - 窗口将重定向到 google.com

var div = document.createElement("div");
div.id = "timer";
div.style.display = "none";
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "80%";
div.style.left = "50%";
document.body.appendChild(div);

var timeoutID;
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 = window.setTimeout(goInactive, 2000);
}

function resetTimer(e) {
    window.clearTimeout(timeoutID);
    goActive();
}

function goInactive() {
    div.style.display = "block";
    div.innerHTML = "Inactivity detected. Redirecting in ..." + (idleTimeout - idleSecondsCounter) + " ...please touch screen to close this message";
    // show a count down here then redirect to google.com
}

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

我一直在关注this tutorial这对我有很大帮助。感谢您的帮助。

Answer 1

这里是带重定向的倒计时的实现。

我刚刚添加了一个每秒调用一次的 setInterval 函数，以减少倒计时或重定向页面。此外，此计时器在 resetTimer 函数中被清除。使用 document.getElementById("countdown").innerHTML

使用 ID 元素更新显示的数字

var div = document.createElement("div");
div.id = "timer";
div.style.display = "none";
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "80%";
div.style.left = "50%";
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 goInactive() {
    idleSecondsCounter = 0;

    div.style.display = "block";
    div.innerHTML = "Inactivity detected. Redirecting in ...<span id='countdown'>" + (idleTimeout - idleSecondsCounter) + "</span> ...please touch screen to close this message";
    // 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();
}