jQuery+localStorage implementiert einen Timer

Dieses Mal bringe ich Ihnen jQuery+localStorage zum Implementieren eines Timers. Was sind die Vorsichtsmaßnahmen für jQuery+localStorage zum Implementieren eines Timers?

Vorwort

In HTML5 wurde eine neue localStorage-Funktion hinzugefügt. Diese Funktion wird hauptsächlich als lokaler Speicher verwendet, um das Problem zu lösen von unzureichendem Speicherplatz von Cookie (der Speicherplatz jedes Cookies im Cookie beträgt 4 KB). Im Allgemeinen unterstützen Browser eine Größe von 5 MB im lokalen Speicher. Dieser lokale Speicher ist in verschiedenen Browsern unterschiedlich.

In diesem Artikel werden hauptsächlich die relevanten Inhalte zu jQuery+localStorage zur Implementierung eines einfachen Timers vorgestellt. Ich werde im Folgenden nicht viel sagen, sondern einen Blick auf die detaillierte Einführung werfen.

Prototyp

Anforderungen

1. Die Uhrzeit läuft weiter, wenn der Browser geschlossen wird

2. Den aktuellen Status beim Aktualisieren beibehalten

3. Die Endzeit wird auf dem gespeichert Kunde

Beispielcode

 <p class="wrapper">
  <p class="app">
  <p class="container stopwatch">   
   <p class="clock inactive z-depth-1">
   <span>0:00:00</span>
   <!-- <p class="overlay waves-effect"></p>-->
   </p>   
   <form>
   <a id="stopwatch-btn-start" class="waves-effect waves-teal btn-flat">开始</a>
   </form> 
  </p>
  </p>
 </p>

<script> 
 // Stopwatch
var stopwatchInterval = 0; // The interval for our loop.循环的间隔。 
var stopwatchClock = $(".container.stopwatch").find(".clock"),
 stopwatchDigits = stopwatchClock.find('span');
// 检查前一个会话是否在秒表运行时结束。 
// 如果是的话，按时间重新开始。 
//即 关闭浏览器，点击开始，在后台保持计时的状态
if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchRunningTime = runningTime;
 startStopwatch();
}
//如果前一个会话有运行时间，就把它写在时钟上。
// 如果没有初始化为0。 
//即结束时不可刷新
if(localStorage.stopwatchRunningTime){
 stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime)));
}
else{
 localStorage.stopwatchRunningTime = 0;
}
 /* 实现开始结束 */
 $("#stopwatch-btn-start").toggle(function() {
  $(this).text ('开始').css("background", "#3bb4f2");
  if(stopwatchClock.hasClass('inactive')){
  startStopwatch()
 }  
 }, function() {  
  $(this).text ('结束').css("background", "red");
  pauseStopwatch();
 }) 
// Pressing the clock will pause/unpause the stopwatch.
//按下暂停/恢复的时钟秒表
/*stopwatchClock.on('click',function(){
 if(stopwatchClock.hasClass('inactive')){
 startStopwatch()
 }
 else{
 pauseStopwatch();
 }
});*/
/*开始计时*/
function startStopwatch(){
 // 防止多个间隔同时进行。 
 clearInterval(stopwatchInterval);
 var startTimestamp = new Date().getTime(),
 runningTime = 0;
 localStorage.stopwatchBeginingTimestamp = startTimestamp;
 // 应用程序还记得上一次会话运行了多长时间。 
 if(Number(localStorage.stopwatchRunningTime)){
 runningTime = Number(localStorage.stopwatchRunningTime);
 }
 else{
 localStorage.stopwatchRunningTime = 1;
 }
 // 每隔100ms重新计算运行时间，计算公式是 
 // 当你上次启动时钟+上次运行时间 
 stopwatchInterval = setInterval(function () {
 var stopwatchTime = (new Date().getTime() - startTimestamp + runningTime);
 stopwatchDigits.text(returnFormattedToMilliseconds(stopwatchTime));
 }, 100);
 stopwatchClock.removeClass('inactive');
}
/*停止计时*/
function pauseStopwatch(){
 // 停止计时 
 clearInterval(stopwatchInterval);
 if(Number(localStorage.stopwatchBeginingTimestamp)){
 // 计算运行时间。 
 // 新的运行时间=上次运行时间+现在-最后一次启动 
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchBeginingTimestamp = 0;
 localStorage.stopwatchRunningTime = runningTime;
 stopwatchClock.addClass('inactive');
 }
}
// 重置.
/*function resetStopwatch(){
 clearInterval(stopwatchInterval);
 stopwatchDigits.text(returnFormattedToMilliseconds(0));
 localStorage.stopwatchBeginingTimestamp = 0;
 localStorage.stopwatchRunningTime = 0;
 stopwatchClock.addClass('inactive');
}
*/
function returnFormattedToMilliseconds(time){
 var 
 seconds = Math.floor((time/1000) % 60),
 minutes = Math.floor((time/(1000*60)) % 60),
 hours = Math.floor((time/(1000*60*60)) % 24);
 seconds = seconds < 10 ? &#39;0&#39; + seconds : seconds;
 minutes = minutes < 10 ? &#39;0&#39; + minutes : minutes;
 return hours + ":" + minutes + ":" + seconds;
}
</script>

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falles in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

jQuery fügt neue Elemente zu dynamischen Listen hinzu

Praktischer Online-Kundenservice für jQuery-Schubladen

So verwenden Sie jQuery zum Auswählen und Bedienen einer Tabelle

Das obige ist der detaillierte Inhalt vonjQuery+localStorage implementiert einen Timer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!