如何在沒有鼠標移動的情況下重定向並顯示當前計時器的計數

我將此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。 –

如何在沒有鼠標移動的情況下重定向並顯示當前計時器的計數

回答

相關問題