利用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 ui sortable拖拽后保存位置
Apr 27 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现轮播图效果
Nov 26 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取整数函数常用的四种方法小结
2012/07/05 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
js 函数的副作用分析
2011/08/23 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
javascript实现简单留言板案例
2021/02/09 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python Flask框架扩展操作示例
2019/05/03 Python
在django view中给form传入参数的例子
2019/07/19 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
临床医学大学生求职信
2013/09/28 职场文书
优秀员工评语
2014/02/10 职场文书
体育教学随笔感言
2014/02/24 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
科技工作者先进事迹
2014/08/16 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python