如果没有鼠标移动，如何重定向并显示当前计时器倒计时答案

【问题标题】：How to Redirect if no mouse movement and show current timer countown如果没有鼠标移动，如何重定向并显示当前计时器倒计时
【发布时间】：2018-03-28 14:27:12
【问题描述】：

我有这个 javascript 作为 div 中的倒数计时器，同时检测鼠标空闲。

  var timer = null;

 setInterval(function() {
            var div = document.querySelector("#counter");
            var count = div.textContent * 1 - 1;
            div.textContent = count;
            if (count == 0) {
                window.location.href="https://example.com";
            }
        }, 1000);

 function goAway() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        window.location.href="https://example.com";
    }, 5000);
}  
window.addEventListener('mousemove', goAway, true); 
goAway();

如果用户超过 5 秒没有移动鼠标，我希望他被重定向到另一个页面。本例中的 example.com。这部分正在工作。但是，我还打算让正确放置的 div 显示要重定向的倒计时，并在 .mousemove 事件的情况下消失。我似乎无法让他们两个都工作。

有可能吗？

http://jsfiddle.net/9sAce/

【问题讨论】：

请解释您的代码做错了什么。在我们帮助解决之前，我们需要知道哪些地方不起作用。

标签： javascript session-timeout jquery-events

【解决方案1】：

希望这会有所帮助。对goAway 函数进行了一些修改。

var timer = null;
 
setInterval(function() {
	var div = document.querySelector("#counter");
	var count = div.textContent * 1 - 1;
	div.textContent = count;
	if (count == 0) {
		window.location.href="https://example.com";
	}
}, 1000);
        
function goAway() {
    var div = document.querySelector("#counter");
    div.innerText = "10";
    clearTimeout(timer);
    timer = setTimeout(function() {
    	  if (div.innerText === "0")
            window.location.href="https://example.com";
    }, 5000);
}  

window.addEventListener('mousemove', goAway, true); 

goAway();

&lt;div id="counter" style="border:1px solid black;width:100px"&gt;10&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以试试这样的：

//<![CDATA[
// external.js
function countdown(outputElement, seconds){
  var s = 5, bs = 5;
  if(seconds){
    s = bs = seconds;
  }
  function tF(){
    outputElement.innerHTML = s = bs;
    return setInterval(function(){
      s--;
      if(!s){
        clearInterval(timer); location = 'https://example.com';
      }
      outputElement.innerHTML = s;
    }, 1000);
  }
  var timer = tF();
  onmousemove = function(){
    clearInterval(timer); timer = tF();
  }
}
var old = onload;
onload = function(){
if(old)old();
countdown(document.getElementById('counter'));
}
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:940px; padding:20px; margin:0 auto;
}
#counter{
  font-size:80px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>simple countdown</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='counter'></div>
  </div>
</body>
</html>

【讨论】：

这种赋值方式很好，只是在初始化 vars 时不行。
您好，我正在尝试修改此计时器，因为它已经可以满足我的需要，但我遇到了问题。我更改了 tF 函数并使其打开一个窗口而不是重定向，但是我还希望它检查选项卡是否已通过单击打开。在这种情况下，不要打开它。你能帮帮我吗？
测试一下你分配给新窗口的变量是否真实。

【解决方案3】：

可配置：

如果您愿意，请将 .timer 替换为 #counter。

t跟踪时间

l 是总时间

h是网址

区间内n是总时间减去当前时间t

v比较计算大于0如果false设置n为0（需要防止负整数）

使用视觉计数更新 DOM

如果n 等于0 则重定向到设置的URL。

(()=>{
    t = 0;
    l = 5;
    h = 'https://example.com';

    document.write('<h1 class="timer">'+l+'</h1>');
    timer = document.querySelector('.timer');

    setInterval(()=>{
        t += 1;
        n = (l - t);
        v = n > 0 ? n : 0;
        timer.innerText = v;

        if(n === 0) {
            window.location.href = h;
        }
    }, 1000);

    document.addEventListener('mousemove', (e) => {
        t = 0;
    });

})();

Click here to see an example:https://codepen.io/DanielTate/pen/VMVMLa

【讨论】：

这行得通，只是计时器只重置为 4 而不是 5
计时器明确表示为 5，正如您在变量 l 中设置的 5 中看到的那样。您可能需要一秒钟来加载页面，脚本会在加载后立即执行，因此您可能看不到数字 5。