jQuery+localStorage는 타이머를 구현합니다.

이번에는 타이머 구현을 위한 jQuery+localStorage를 가져왔습니다. jQuery+localStorage에서 타이머를 구현할 때 사용할 주의사항은 무엇인지 살펴보겠습니다.

머리말

HTML5에는 새로운 localStorage 기능이 추가되었습니다. 이 기능은 주로 로컬 저장소로 사용되며 쿠키 저장 공간이 부족한 문제를 해결합니다(쿠키의 각 쿠키 저장 공간은 4k입니다. ) 일반적으로 브라우저는 localStorage에서 5M 크기를 지원합니다. 이 localStorage는 브라우저마다 다릅니다.

이 글은 간단한 타이머를 구현하기 위한 jQuery+localStorage에 대한 관련 내용을 주로 소개합니다. 모두의 참고와 학습을 위해 공유합니다. 아래에서는 자세히 설명하지 않겠습니다.

Prototype

Requirements

1. 브라우저를 닫아도 시간은 계속 실행됩니다.

2. 새로 고칠 때 현재

상태를 유지합니다. 3. 종료 시간은 클라이언트에 저장됨

샘플 코드

 <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>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트! 추천 자료:

jQuery가 동적 목록에 새 요소를 추가합니다

실용적인 jQuery 서랍 온라인 고객 서비스

jQuery를 사용하여 테이블을 선택하고 조작하는 방법

위 내용은 jQuery+localStorage는 타이머를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!