JavaScript popdown popup

Question

Я пытаюсь создать div, содержащий всплывающее окно javascript, после 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. Отображаемый номер обновляется с помощью 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(); 
} 

Answer 2

Все, что вам нужно, это огнь setInterval обновить Диво сообщение до вам нужно проверить фрагмент код ниже.

PS: Вам необходимо добавить код в clearInterval, когда вы активны в своем методе goActive, поэтому в следующий раз он начнет отсчет с 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(){ 
 
    \t idleSecondsCounter++; 
 
     div.innerHTML = "Inactivity detected. Redirecting in ..." + (idleTimeout - idleSecondsCounter) + " ...please touch screen to close this message"; 
 
     if(idleTimeout - idleSecondsCounter === 0){ 
 
      clearInterval(idleSecondsTimer); 
 
     \t 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>