前言
在html5中，新加入了一个localstorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localstorage中一般浏览器支持的是5m大小，这个在不同的浏览器中localstorage会有所不同。
本文主要介绍了关于jquery+localstorage实现简易计时器的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
原型
需求
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 ? '0' + seconds : seconds; minutes = minutes < 10 ? '0' + minutes : minutes; return hours + ":" + minutes + ":" + seconds; } </script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery向动态列表添加新元素
实用的jquery抽屉式在线客服
怎么使用jquery选中并且操作table
以上就是jquery+localstorage实现计时器的详细内容。