Esempio di codice di un timer semplice utilizzando jQuery + localStorage

Introduzione

In HTML5, è stata aggiunta una nuova caratteristica chiamata localStorage, questa caratteristica è principalmente utilizzata come memoria locale, risolvendo il problema di spazio di archiviazione insufficiente dei cookie (ogni cookie ha uno spazio di archiviazione di 4k), localStorage generalmente supportato dai browser è di 5M, che può variare da browser a browser.

Questo articolo introduce i contenuti relativi all'implementazione di un cronometro semplice utilizzando jQuery+localStorage, condivide per riferimento e studio, non c'è molto da dire, vediamo insieme la descrizione dettagliata.

Prototipo

Requisiti

　　　　　　 1. Continua a funzionare quando si chiude il browser

　　　　　　2. Mantieni lo stato corrente durante il riavvio

　　　　　　3. La data di fine è salvata sul client

Esempio di codice

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

<script> 
 // Cronometro
var stopwatchInterval = 0; // L'intervallo del nostro ciclo. 
var stopwatchClock = $(".container.stopwatch").find(".clock"),
 stopwatchDigits = stopwatchClock.find('span');
// Controlla se la sessione precedente è stata terminata durante il conteggio del cronometro. 
// Se lo è, riavvia in base al tempo. 
// Chiudi il browser, fai clic su inizio, mantieni il conteggio in background
if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){
 var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
 localStorage.stopwatchRunningTime = runningTime;
 startStopwatch();
}
// Se la sessione precedente aveva un tempo di esecuzione, scrivilo sull'orologio.
// Se non è stato inizializzato a 0. 
// Non aggiornare alla fine
if(localStorage.stopwatchRunningTime){
 stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime)));
}
else{
 localStorage.stopwatchRunningTime = 0;
}
 /* Implementa inizio/fine */
 $("#stopwatch-btn-start").toggle(function() {
  $(this).text ('Inizio').css("background", "#3bb4f2");
  if(stopwatchClock.hasClass('inactive')){
  startStopwatch()
 }  
 }, function() {  
  $(this).text ('Fine').css("background", "red");
  pauseStopwatch();
 }) 
// Premendo il timer, il cronometro viene messo in pausa/riavviato.
// Premere il timer per pausare/riavviare il cronometro
/*stopwatchClock.on('click',function(){
 if(stopwatchClock.hasClass('inactive')){
 startStopwatch()
 }
 else{
 pauseStopwatch();
 }
});*/
/* Inizia il conteggio */
function startStopwatch(){
 // Evitare che più intervalli vengano eseguiti contemporaneamente. 
 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 ? '0' + seconds : seconds;
 minutes = minutes < 10 ? '0' + minutes : minutes;
 return hours + ":" + minutes + ":" + seconds;
}
</script>

Sommario

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo abbia un valore di riferimento per la tua apprendimento o lavoro. Se hai domande, puoi lasciare un commento per discutere, grazie per il supporto di Manuale urla.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.