JavaScript - ページの再ロード時などのカウントダウン

ここでは、「START」ボタンを押すと10分のカウントダウンタイマーを作成しました。私はこのカウントダウンを保存して、ユーザーがページを開いて戻ってくるとカウントダウンが行われるようにしたい。カウントダウンを停止してからページの再読み込みを中断した場所で続行しないようにしてください。指定した期限まで続行してください。助言がありますか？JavaScript - ページの再ロード時などのカウントダウン

<html> 
<head> 

</head> 
<body> 



    <a id="sendButton" class="button" onclick=" startClock();">START</a> 

     <div id="sectionClock"> 

     <div id="clockdiv"> 
      <div> 
       <span class="hours"></span> 
       <div class="smalltext">Hours</div> 
      </div> 
      <div> 
       <span class="minutes"></span> 
       <div class="smalltext">Minutes</div> 
      </div> 
      <div> 
       <span class="seconds"></span> 
       <div class="smalltext">Seconds</div> 
      </div> 
     </div> 
    </div> 

    <script> 
function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    return { 
     'total': t, 
     'hours': hours, 
     'minutes': minutes, 
     'seconds': seconds 
    }; 
} 
var flag = 0; 

function startClock() { 


    /************ INITIALIZE CLOCK ************/ 
    function initializeClock(id, endtime) { 

     // If countdown time is 0 then operate 
     if(flag==0) 
     { 
      var clock = document.getElementById(id); 
      var hoursSpan = clock.querySelector('.hours'); 
      var minutesSpan = clock.querySelector('.minutes'); 
      var secondsSpan = clock.querySelector('.seconds'); 

     flag=1; 
     } 


     function updateClock() { 
      var t = getTimeRemaining(endtime); 


      hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

      if (t.total <= 0) { 
       clearInterval(timeinterval); 
       flag=0; 
      } 
     } 

     updateClock(); 
     var timeinterval = setInterval(updateClock, 1000); 
    } 

    var timeInMinutes = 10; 
    var currentTime = Date.parse(new Date()); 
    var deadline = new Date(currentTime + timeInMinutes*60*1000); 
    initializeClock('clockdiv', deadline); 

    document.cookie = deadline 

    var cookie = document.cookie; 

    console.log(cookie); 

} 

function sendTrack(){ 
    (function() { 

     var trackUrl = document.getElementById("url");  

    }()); 
} 

    </script> 

</body> 
</html>

出典

2016-05-05 mellows

あなたはクッキーを使用しての正しい考えを持っていますが、you need to make sure you're reading/writing it correctly.は、私は実際に代わり、ローカルストレージを使用してお勧めします。

var deadline = localStorage.deadline; 
if (deadline) { // Make sure we've saved one before 
    deadline = new Date(deadline); 
} else { // Create a new one and save it 
    deadline = new Date(Date.now() + timeInMinutes*60*1000); 
    localStorage.deadline = deadline; 
}

出典

2016-05-05 19:49:30

クロックはクリック機能で初期化されますが、これは機能しますか？ – mellows

@mellows確かに。ページが読み込まれるとすぐにロードしたい場合は、メインコードの最初の部分を実行してください。期限がローカルストレージにあるかどうかを確認してください。そうであれば、カウントダウンを開始します。それ以外の場合は、クリックを待ちます。 –

私はかなり新しくコーディングしていますが、実際の例はないと思いませんか？コードをどこに置くのか分かりません。助けを感謝します！ – mellows

JavaScript - ページの再ロード時などのカウントダウン

答えて

関連する問題