Question

我有这个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/

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以尝试以下方式：

＆＃13;

echo '<div align="center">';
echo '<div style="width:80%;line-height:10px">';
echo '<div align="left">';
echo '<p style="margin-top:20px;line-height:10px;margin-bottom:10px">'.$array[$i].'</p>';
echo '</div>';
echo "<br>";
echo "<hr>";
echo '</div>';
echo '</div>';

＆＃13;

//<![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'));
}
//]]>

＆＃13;

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

＆＃13;

Answer 3

可配置：

如果这是你的偏好，请将#titer换掉.timer。

t跟踪时间

l是总时间

h是网址

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

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

使用可视化计数

更新DOM

如果n等于0，则重定向到设置的网址。

(()=>{
    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

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

3 个答案: