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

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

<script> 
 // Swatch
var swatchInterval = 0; // The interval for our loop.循环的间隔。 
var swatchClock = $(".container.swatch").find(".clock"),
 swatchDigits = swatchClock.find('span');
// 检查前一个会话是否在秒表运行时结束。 
// 如果是的话，按时间重新开始。 
//即 关闭浏览器，点击开始，在后台保持计时的状态
if(Number(localStorage.swatchBeginingTimestamp) && Number(localStorage.swatchRunningTime)){
 var runningTime = Number(localStorage.swatchRunningTime) + new Date().getTime() - Number(localStorage.swatchBeginingTimestamp);
 localStorage.swatchRunningTime = runningTime;
 startSwatch();
}
//如果前一个会话有运行时间，就把它写在时钟上。
// 如果没有初始化为0。 
//即结束时不可刷新
if(localStorage.swatchRunningTime){
 
 swatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.swatchRunningTime)));
 
}
else{
 localStorage.swatchRunningTime = 0;
}
 / 实现开始结束 /
 $("#swatch-btn-start").toggle(function() {
  $(this).text ('开始').css("background", "#3bb4f2");
  if(swatchClock.hasClass('inactive')){
  startSwatch()
 }  
 }, function() {  
  $(this).text ('结束').css("background", "red");
  pauseSwatch();
 }) 
// Pressing the clock will pause/unpause the swatch.
//按下暂停/恢复的时钟秒表
/swatchClock.on('click',function(){
 if(swatchClock.hasClass('inactive')){
 startSwatch()
 }
 else{
 pauseSwatch();
 }
});/
/开始计时/
function startSwatch(){
 // 防止多个间隔进行。 
 clearInterval(swatchInterval);
 var startTimestamp = new Date().getTime(),
 runningTime = 0;
 localStorage.swatchBeginingTimestamp = startTimestamp;
 // 应用程序还记得上一次会话运行了多长时间。 
 if(Number(localStorage.swatchRunningTime)){
 runningTime = Number(localStorage.swatchRunningTime);
 }
 else{
 localStorage.swatchRunningTime = 1;
 }
 // 每隔100ms重新计算运行时间，计算公式是 
 // 当你上次启动时钟+上次运行时间 
 swatchInterval = setInterval(function () {
 var swatchTime = (new Date().getTime() - startTimestamp + runningTime);
 swatchDigits.text(returnFormattedToMilliseconds(swatchTime));
 }, 100);
 swatchClock.removeClass('inactive');
}
/停止计时/
function pauseSwatch(){
 // 停止计时 
 clearInterval(swatchInterval);
 if(Number(localStorage.swatchBeginingTimestamp)){
 // 计算运行时间。 
 // 新的运行时间=上次运行时间+现在-一次启动 
 var runningTime = Number(localStorage.swatchRunningTime) + new Date().getTime() - Number(localStorage.swatchBeginingTimestamp);
 localStorage.swatchBeginingTimestamp = 0;
 localStorage.swatchRunningTime = runningTime;
 swatchClock.addClass('inactive');
 }
}
// 重置.
/function resetSwatch(){
 clearInterval(swatchInterval);
 swatchDigits.text(returnFormattedToMilliseconds(0));
 localStorage.swatchBeginingTimestamp = 0;
 localStorage.swatchRunningTime = 0;

 swatchClock.addClass('inactive');
}
/
function returnFormattedToMilliseconds(time){
 var 
 seconds = Math.floor((time/1000) % 60),
 minutes = Math.floor((time/(100060)) % 60),
 hours = Math.floor((time/(10006060)) % 24);
 seconds = seconds < 10 ? '0' + seconds : seconds;
 minutes = minutes < 10 ? '0' + minutes : minutes;
 return hours + ":" + minutes + ":" + seconds;
}
</script>