利用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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php的access操作类
2008/04/09 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python中有函数重载吗
2020/05/28 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
领导干部考核评语
2015/01/04 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书