ページリフレッシュ後のストップウォッチタイマのリセットを防ぐ方法

ページのロードで始まるJavaScriptのストップウォッチがあります。私は、ページをリフレッシュした後、カウンタがゼロにリセットされないようにしようとしています。私はsessionStorageまたはlocalStorageを使用できると信じています。私はすでに持っているコードで実装する方法がわかりません。アドバイスをいただければ幸いです。ページリフレッシュ後のストップウォッチタイマのリセットを防ぐ方法

 <!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 



    <script type="text/javascript"> 
var timeBegan = null 
    , timeStopped = null 
    , stoppedDuration = 0 
    , started = null; 

function start() { 
    if (timeBegan === null) { 
     timeBegan = new Date(); 
    } 

    if (timeStopped !== null) { 
     stoppedDuration += (new Date() - timeStopped); 
    } 
    console.log(stoppedDuration); 

    started = setInterval(clockRunning, 10);  
} 

function stop() { 
    timeStopped = new Date(); 
    clearInterval(started); 
} 
     function reset() { 
    clearInterval(started); 
    stoppedDuration = 0; 
    timeBegan = null; 
    timeStopped = null; 
    document.getElementById("display-area").innerHTML = "00:00:00.000"; 
} 

function clockRunning(){ 
    var currentTime = new Date() 
     , timeElapsed = new Date(currentTime - timeBegan - stoppedDuration) 
     , hour = timeElapsed.getUTCHours() 
     , min = timeElapsed.getUTCMinutes() 
     , sec = timeElapsed.getUTCSeconds() 
     , ms = timeElapsed.getUTCMilliseconds(); 

    document.getElementById("display-area").innerHTML = 
     (hour > 9 ? hour : "0" + hour) + ":" + 
     (min > 9 ? min : "0" + min) + ":" + 
     (sec > 9 ? sec : "0" + sec) + "." + 
     (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms); 
}; 
    </script> 



</head> 



<body onload="start();"> 
<div> 
      <textarea id="display-area" style="font-size: 18px; color:chartreuse; height:22px; background-color: black; padding-left:16px; padding-right: 12px; width:133px; border: groove; border-width: 4px; border-color: goldenrod; border-radius: 3px; resize:none; overflow:hidden">00:00:00.000</textarea> 
     </div><input type="button" form="time" onclick="stop();" value="stop"></p> 



</body> 
</html>

出典

2017-02-28 J. Parker

ローカルキャッシュを使用します。 –

ストップウォッチが開始されるたびに、ストップウオッチが止まり、 "チック"し、現在の値が 'localStorage'に格納され、停止/実行中のステータスフラグも格納されます。次に、ページの読み込み時に、保存された詳細を確認し、必要に応じてストップウォッチを設定/開始することができます。 – nnnnnn

this fiddleをご覧ください。それはあなたが望むだけで、開始時間をlocalStorageに格納し、ロードごとに取得します。

function start() { 
    startTime = parseInt(localStorage.getItem('startTime') || Date.now()); 
    localStorage.setItem('startTime', startTime); 
    timer = setInterval(clockTick, 100); 
}

出典

2017-02-28 06:52:23 t3mplar

素晴らしい作品です！私は今それを見て理解する。あなたは知識を広げることを感謝します！ –

@ J.Parker、あなたはこの問題を解決として設定できますか？ – t3mplar

ページリフレッシュ後のストップウォッチタイマのリセットを防ぐ方法

答えて

関連する問題