如何在没有鼠标移动的情况下重定向并显示当前计时器的计数

我将此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/

来源

2017-10-17 javipaz

请解释一下你的代码是做错了。在我们能够帮助解决问题之前，我们需要知道哪些方面无法解决。 – Soviut

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

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

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

 
goAway();

<div id="counter" style="border:1px solid black;width:100px">10</div>

来源

2017-10-17 01:09:43

你可以尝试这样的：

//<![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>

来源

2017-10-17 01:18:04 PHPglue

很确定s = bs =部分会抛出错误。 –

这种作业风格很好，只是当你初始化变量时。 – PHPglue

你是对的。 –

配置：

换出.timer为#counter如果”你的偏好。

t跟踪时间

l是总时间

h是URL

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

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

更新与视觉计数

如果n的DOM是等于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

来源

2017-10-17 01:37:29

这个工作原理除了定时器只重置为4而不是5 – javipaz

定时器明确地说5是在变量l中的5个集合中可以看到的。您可能需要一秒钟才能加载页面，该脚本在加载后立即执行，因此您可能看不到数字5。 –

如何在没有鼠标移动的情况下重定向并显示当前计时器的计数

回答

相关问题