APP微信小程序制作_使用jQuery+localStorage完成一个简易的计时器示

利用jQuery+localStorage实现一个简易的计时器示例代码       这篇文章主要给大家介绍了关于利用jQuery+localStorage实现一个简易的计时器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

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

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

原型

需求

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

 2.刷新时保持当前状态

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

示例代码

 div 
 div 
 div 
 div 
 span  /span 
 !-- div /div -- 
 /div 
 form 
 a id="stopwatch-btn-start" 开始 /a 
 /form 
 /div 
 /div 
 /div 

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

总结

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


相关阅读