JavascriptまたはJqueryの連続カウントダウンタイマー

Question

javascriptまたはjqueryで簡単なカウントダウンタイマーを作成したいと思います。

私はJSを使用して実装しましたが、ユーザーがページをリフレッシュしてからタイマーがリフレッシュされると、私が直面している問題は何ですか。

私が欲しいのは、タイマーがリフレッシュを取得しないことです。 タイのタイマーは5分です。ユーザーが1分後にページを更新すると、タイマーは5分ではなく4分から開始し続ける必要があります。 ここにコードスニペットがあります。 ページリフレッシュ時にタイマーをリフレッシュします。

var timeoutHandle; 
 
function countdown(minutes) { 
 
    var seconds = 60; 
 
    var mins = minutes 
 
    function tick() { 
 
     var counter = document.getElementById("timer"); 
 
     var current_minutes = mins-1 
 
     seconds--; 
 
     counter.innerHTML = 
 
     current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds); 
 
     if(seconds > 0) { 
 
      timeoutHandle=setTimeout(tick, 1000); 
 
     } else { 
 

 
      if(mins > 1){ 
 

 
       // countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst 
 
       setTimeout(function() { countdown(mins - 1); }, 1000); 
 

 
      } 
 
     } 
 
    } 
 
    tick(); 
 
} 
 

 
countdown(2);

<div id="timer">2:00</div>

Answer 1

あなたは自分のカウンターと一緒のsessionStorageを更新し、カウンタを起動時にそれを読んで。残念ながら、関連するスニペットが原因クロスドメインポリシーにstackoverflowの上では動作しません - ので、ここでcodepen https://codepen.io/anon/pen/opNpVe

function countdown(seconds) { 
    seconds = parseInt(sessionStorage.getItem("seconds"))||seconds; 

    function tick() { 
    seconds--; 
    sessionStorage.setItem("seconds", seconds) 
    var counter = document.getElementById("timer"); 
    var current_minutes = parseInt(seconds/60); 
    var current_seconds = seconds % 60; 
    counter.innerHTML = current_minutes + ":" + (current_seconds < 10 ? "0" : "") + current_seconds; 
    if(seconds > 0) { 
     setTimeout(tick, 1000); 
    } 
    } 
    tick(); 
} 

countdown(120);