利用jQuery+localStorage实现一个简易的计时器示例代
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要给大家介绍了关于利用jQuery+localStorage实现一个简易的计时器的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化来一起看看吧。
前言
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容,分享出来供大家参考学习,狼蚁网站SEO优化话不多说了,来一起看看详细的介绍吧。
原型
需求
1.关闭浏览器时时间继续运行
2.刷新时保持当前状态
3.结束时间保存在客户端
示例代码
<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/(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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对狼蚁SEO的支持。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程