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>
完整的demo下载链接:https://pan.baidu.com/s/1kVOmt4V 密码:rfqq
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】
jQuery+ localStorage 实现一个简易的计时器的更多相关文章
- 从零实现一个简易的jQuery框架之二—核心思路详解
如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...
- jQuery 开发一个简易插件
jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...
- jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具
1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...
- 从零实现一个简易jQuery框架之一—jQuery框架概述
我们知道,不管学习任何一门框架,了解其设计的理念.目的.总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的.因此在这里先梳理一下本人对jQuery框架的一些理解. 设计目的(为什么要 ...
- [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统
一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...
- AngularJs打造一个简易权限系统
AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...
- Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...
- 使用 RxJS 实现一个简易的仿 Elm 架构应用
使用 RxJS 实现一个简易的仿 Elm 架构应用 标签(空格分隔): 前端 什么是 Elm 架构 Elm 架构是一种使用 Elm 语言编写 Web 前端应用的简单架构,在代码模块化.代码重用以及测试 ...
- 使用Phalcon框架开发一个简易的博客系统
使用Phalcon PHP框架开发一个简易的博客系统(类似于CMS) 最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...
随机推荐
- 解决浏览器不兼容websocket
本例使用tomcat 7.0的websocket做为例子. 1.新建web project.2.找到tomcat 7.0 lib 下的 catalina.jar,tomcat-coyote.jar添加 ...
- Flask项目之手机端租房网站的实战开发(十二)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 库函数strcpy/strlen的工作方式
库函数strcpy/strlen的工作方式 分类: C/C++ 2011-07-03 23:49 1032人阅读 评论 ...
- Spring Boot使用模板freemarker【从零开始学Spring Boot(转)
视频&交流平台: à SpringBoot网易云课堂视频 http://study.163.com/course/introduction.htm?courseId=1004329008 à ...
- 打开utf-8文件乱码的解决方法
gvim一直用的好好的,但是今天看一网友贴出来的代码时,却发现中文显示乱码了.... 使用notepad++打开,右下角显示是utf-8 w/0 BOM. 马上放狗, 发现解决方法如下: 在_vi ...
- Oracle 带回滚的存储过程
create or replace procedure PROC_insertUserAmount ( userid number, msgtype number, amountvalue numbe ...
- LA 3135 - Argus
看题:传送门 大意就是让你编写一个称为argus的系统,这个系统支持一个register的命令: Register Q_num Period 该命令注册了一个触发器,它每Period秒就会残生一个编 ...
- Spring 定时器 No qualifying bean of type [org.springframework.scheduling.TaskScheduler] is defined(转)
最近项目里面,用了spring的定时任务,一直以来,项目运行的不错.定时器也能正常使用.可是,今天启动项目测试的时候,盯着启动Log看了一阵子,突然间发现,启动的Log中居然有一个异常,虽然一闪而过, ...
- 在 AppDelegate 设置屏幕切换
//禁止横屏显示 - (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWin ...
- stm32的ADC外设地址设置算法
摘自:https://wenku.baidu.com/view/e3ce2a215901020207409c15.html### /////////////////////////////////// ...