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


Posted in jQuery onDecember 25, 2017

前言

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

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

原型

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

需求

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

      2.刷新时保持当前状态

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

示例代码

<div class="wrapper">
  <div class="app">
  <div class="container stopwatch">   
   <div class="clock inactive z-depth-1">
   <span>0:00:00</span>
   <!-- <div class="overlay waves-effect"></div>-->
   </div>   
   <form>
   <a id="stopwatch-btn-start" class="waves-effect waves-teal btn-flat">开始</a>
  
   </form>
   
  </div>
  </div>
 </div>
<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 获取Dom元素的实例讲解
Jul 08 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
js实现简单页面全屏
2019/09/17 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
对Python w和w+权限的区别详解
2019/01/23 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python内置异常类型全面汇总
2020/05/28 Python
python与idea的集成的实现
2020/11/20 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
C语言面试题
2015/10/30 面试题
电信营业员自我评价分享
2014/01/17 职场文书
音乐教育感言
2014/03/05 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
三年级学生期末评语
2014/12/26 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL