JavaScript倒计时弹出窗口

jonboy 发表于 Dev

强子

我尝试div在2秒钟的不活动状态后使一个包含javascript计时器弹出窗口，然后在再次有活动时消失。

我想我快到了，我用一些代码创建了一个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();
}

我一直在关注本教程，该教程对我有很大帮助。任何帮助表示赞赏。

sdespont

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

我刚刚添加了一个setInterval函数，该函数每秒钟调用一次，以减少您的倒计时或重定向页面。同样，该定时器在resetTimer功能中清除。使用ID元素使用来更新显示的数字document.getElementById("countdown").innerHTML

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();
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。