logo标签列表

JavaScript倒计时弹窗

javascripthtmlfunctiontimeraddeventlistener
3
我正在尝试创建一个包含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();
}

我一直在跟随这个教程，它对我有很大的帮助。非常感谢任何帮助。

2个回答
1
你只需要使用setInterval来更新你的div消息，直到你需要检查下面的代码片段。
PS：在你的goActive方法中活跃时，你需要添加clearInterval代码，这样下一次它将再次从5开始计数，当计数器达到0时，它不会变为-1。 

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
    idleSecondsTimer = setInterval(function(){
     idleSecondsCounter++;
        div.innerHTML = "Inactivity detected. Redirecting in ..." + (idleTimeout - idleSecondsCounter) + " ...please touch screen to close this message";
        if(idleTimeout - idleSecondsCounter === 0){
            clearInterval(idleSecondsTimer);
         location.href = 'http://www.google.com';
        }
    },1000);
}

function goActive() {
    div.style.display = "none";
    startTimer();
    if(idleSecondsTimer){
        idleSecondsCounter = 0;
        clearInterval(idleSecondsTimer);
    }
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

感谢@joyBlanks的解释。 - jonboy
1
这是倒计时并重定向的实现。
我刚刚添加了一个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();
}
@johnny_s 我刚刚添加了一个setInterval函数，每秒钟调用一次，以便减少你的倒计时或重定向页面。此外，该计时器在resetTimer函数中被清除。使用ID元素更新显示的数字，使用document.getElementById("countdown").innerHTML。 - sdespont
@johnny_s 我会说“为什么要更新静态文本，当你只需要更新动态部分呢？”https://developer.mozilla.org/en/docs/Web/API/Document/getElementById - sdespont
如果你的页面已经被重定向到 Google，那么你已不再查看你的页面。因此，计时器也不存在了。请更详细地解释你的问题。 - sdespont
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接