使用jQuery本地存储实现一个简单的计时器示例代码

前言

在HTML5中，增加了一个新的localStorage特性。该功能主要作为localStorage使用，解决了cookie存储空间不足的问题(cookie中每个cookie的存储空间为4k)。localStorage中的一般浏览器都支持5M大小，不同的浏览器会有所不同。

本文主要介绍jQuery localStorage实现简单定时器的相关内容，可以分享给大家参考和学习。以下就不多说了。我们来看看详细的介绍。

原型

需求

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

2.刷新时保持当前状态

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

示例代码

div class=' wrapper ' div class=' app ' div class='容器秒表div class='时钟非活动z深度-1 ' span 0:000:00/span！-div='叠加波-效果/div - /div形成一个id='秒表-btn-start' class='波-效果波-teal btn-flat开始/a/form/div/div脚本//stopcwatchvar stopcwatchinterval=0；//我们循环的间隔。循环的间隔。var StOpwatchclock=$('。集装箱。秒表')。查找('。clock ')，stop watch digits=stop watch clock。find(' span ')；//检查前一个会话是否在秒表运行时结束。 //如果是的话，按时间重新开始。 //即关闭浏览器，点击开始，在后台保持计时的状态if(Number(本地存储。stopcwatchebeginningtimestamp)编号(本地存储。stopcwatcherunning time)){ var运行时间=Number(本地存储。stopcwatcheruningtime)新日期()。getTime()-Number(本地存储。stopcwatchbegingtimestamp)；本地存储。stopcwatchrunning运行时间=运行时间；开始秒表();}//如果前一个会话有运行时间，就把它写在时钟上。//如果没有初始化为0。//即结束时不可刷新if(本地存储。stop watch running time){ stop watch digits。text(returnformatedtomlisseconds(Number(本地存储。stopcwatchrunning time)))；} else {本地存储。stopcwatchrunning运行时间=0；} /* 实现开始结束*/$(' #秒表-btn-start ').切换(函数(){ $(this)).文本('开始').css(“”背景，' # 3bb 4 f 2 ')；if(StOpwatchclock。有类('非活动'){ StartSwatch()} }，函数(){ $(this).文本('结束').css(“”背景','红色');pausetpwatch()；}) //按下时钟将暂停/取消秒表计时。//按下暂停/恢复的时钟秒表/* stop watch clock。on(' click ')、function(){ if(stopcwatchclock。has class(' inactive ')} { start stock watch()} else { pausetpwatch()；}});*//*开始计时*/函数开始秒表(){ //防止多个间隔同时进行clearInterval(停止监视间隔)；var startTimestamp=新日期()。getTime()，运行时间=0；本地存储。stopcwatchbeginingtimestamp=开始时间戳；//应用程序还记得上一次会话运行了多长时间if(Number(本地存储。stopcwatchrunning time)){运行时间=Number(本地存储。stopcwatchrunning运行时间)；} else {本地存储。stopcwatchrunning运行时间=1；} //每隔100毫秒重新计算运行时间，计算公式是//当你上次启动时钟上次运行时间stopwatchInterval=setInterval(函数(){ var stopwatchTime=(新日期()。getTime()-startTimestamp运行时间)；stopcwatchdigits。text(returnformatedtomallisches(stopcwatchtime))；}, 100);' stopwatchClock.removeClass('非活动');}/*停止计时*/function pausetpwatch(){//停止计时clearInterval(停止监视间隔);if(Number(本地存储。stopcwatchbeginingtimestamp)){//计算运行时间。 //新的运行时间=上次运行时间现在-最后一次启动变量运行时间=数字(本地存储。stopcwatchrunning运行时间)新日期()。getTime()-Number(本地存储。stopcwatchbegingtimestamp)；本地存储。stopcwatchbeginingtimestamp=0；本地存储。stopcwatchrunning运行时间=运行时间；' stopwatchClock.addClass('非活动');}}//重置。/*函数resetStopwatch(){ clearInterval(stopcwatchinterval)；stopcwatchdigits。text(returnformatedtomallseconds(0))；本地存储。stopcwatchbeginingtimestamp=0；本地存储。StOpwatchrunning时间=0；' stopwatchClock.addClass('非活动');} */function returnformattedtomiliseconds(time){ var seconds=math。地板((时间/1000)% 60)、分钟=数学。楼层((时间/(1000 * 60))% 60)、小时=数学。楼层((时间/(1000 * 60 * 60))% 24)；秒=10秒？0 '秒：秒；分钟=10分钟？0 '分钟：分钟；返回小时' : '分钟' : '秒；}/脚本总结

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