マウスの動きがない場合にリダイレクトして現在のタイマーのカウントダウンを表示する方法

divのカウントダウンタイマーとして動作し、同時にマウスのアイドル状態を検出するためにこのjavascriptを使用しています。マウスの動きがない場合にリダイレクトして現在のタイマーのカウントダウンを表示する方法

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。この部分は機能しています。しかし、私はまた、.mousemoveイベントの場合、リダイレクトされるべきカウントダウンを表示するために右に配置されたdivを意図します。私は彼らの両方を働かせるように見えません。

は可能ですか？

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

あなたのような何か試してみてください。その場合は、」#counterため.timerアウト

スワップ：

//<![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 = sectionsは間違いなくエラーを投げます。 –

ヴァースを初期化しても、その割り当てのスタイルは問題ありません。 – PHPglue

あなたは正しいです。 –

設定可能にあなたの好み。

tトラック時間

lは合計時間

h間隔nの内部URL

される合計時間マイナス現在時刻t

vは0よりも大きい計算を比較falseの場合nを0に設定します（負の整数を防ぐために必要です）。）

nが設定されたURLへのリダイレクト0に等しい場合は、視覚的、カウント

とDOMを更新します。

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

これは、タイマーが5の代わりに4にリセットされることを除いて機能します – javipaz

タイマーは、変数lの5セットにあるように、明示的に5と表示されます。ページをロードするのに1秒かかる場合があります。スクリプトはロードされるとすぐに実行され、番号5が表示されない場合があります。 –

マウスの動きがない場合にリダイレクトして現在のタイマーのカウントダウンを表示する方法

答えて

関連する問題