利用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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现电梯导航模块
Dec 22 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
splice slice区别
2006/10/09 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python set常用操作函数集锦
2017/11/15 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
使用索引有什么好处
2016/07/27 面试题
《金子》教学反思
2014/04/13 职场文书