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在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...
随机推荐
- 基于EmguCV的摄像机标定及矫正
标签: EmguCV摄像头标定C# 2015-05-03 14:55 501人阅读 评论(6) 收藏 举报 分类: C# 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] ...
- Dcloud开发webApp踩过的坑
Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...
- 作为一个新人,怎样学习嵌入式Linux?(韦东山)
这篇文章是引用韦老师的部分关于新人怎么学习嵌入式Linux的经验,引用如下: 1.电脑一开机,那些界面是谁显示的?是BIOS,它做什么?一些自检,然后从硬盘上读入windows,并启动它. 类似的, ...
- windows下安装emscripten
windows下安装emscripten windows下安装emscripten需要python.git环境 python安装 git安装 开始安装 # 1.克隆emsdk git clone ht ...
- POJ 2386 Lake Counting DFS水水
http://poj.org/problem?id=2386 题目大意: 有一个大小为N*M的园子,雨后积起了水.八连通的积水被认为是连接在一起的.请求出院子里共有多少水洼? 思路: 水题~直接DFS ...
- UML学习总结(1)——UML学习入门
随着亲手接触的项目越来越多,项目的复杂度越来越大,项目的理解程度也变的很难,尤其是在接收一个别人已经做好的项目时,你迫切先想到的就是"有没有文档啊",当然是各种文档,概要设计文档, ...
- Python 在线笔试
1. 循环输入输出交互 Python在线笔试琐碎 求两个整数 A+B 的和. while True: try: (n, m) = (int(x) for x in raw_input().split( ...
- jQuery常用的API
1.jQuery给标签添加子元素(父子关系) jQuery对象.append("子"); 将div标签插入到ul标签之后 $("ul").append($('d ...
- JSONP的使用示例(以及jquery版jsonp)超简单
前言: 平时工作中很少跨域,很少用到jsonp,但是几乎每次面试都会被问到这个问题.很崩溃. 菜鸟教程上的jsonp教程就很好.这里做个笔记,自己捋一遍. Jsonp(JSON with Paddin ...
- MongoDB集群安装与配置2.4.3版本
mongoDB安装http://www.mongodb.org/downloads拷文件到# cp mongodb-linux-i686-2.4.1.tgz /usr/local/进入目录:# cd ...