利用jQuery+localStorage实现一个简易的计时器示例代码

前言

在html5中，新加入了一个localstorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localstorage中一般浏览器支持的是5m大小，这个在不同的浏览器中localstorage会有所不同。

本文主要介绍了关于jquery+localstorage实现简易计时器的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

原型

需求

       1.关闭浏览器时时间继续运行

      2.刷新时保持当前状态

      3.结束时间保存在客户端

示例代码

 <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">开始</a>
  
   </form>
   
  </div>
  </div>
 </div>

<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 ? '0' + seconds : seconds;
 minutes = minutes < 10 ? '0' + minutes : minutes;
 return hours + ":" + minutes + ":" + seconds;
}
</script>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。