利用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实现二级联动效果
Mar 30 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现简单聊天室
Feb 08 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
JS控制表格隔行变色
2006/06/26 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
js实现日历与定时器
2017/02/22 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
我们的节日中秋活动方案
2014/08/19 职场文书
会计学习心得体会
2014/09/09 职场文书