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在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...
随机推荐
- JS 数字格式千分位相互转换
/** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousa ...
- ORACLE11g R2【单实例 FS→单实例FS】
ORACLE11g R2[单实例 FS→单实例FS] 本演示案例所用环境: primary standby OS Hostname pry std OS Version RHEL6.5 RHEL6 ...
- Python 极简教程(八)字符串 str
由于字符串过于重要,请认真看完并保证所有代码都至少敲过一遍. 对于字符串,前面在数据类型中已经提到过.但是由于字符串类型太过于常用,Python 中提供了非常多的关于字符串的操作.而我们在实际编码过程 ...
- Java Web学习总结(3)——Servlet详解
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- jdk目录详解及其使用方法
jdk目录详解 jdk目录详解 JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和应用程序的程序开发环境.它由一个处于操作系统层之上的 ...
- PatentTips - Use of multiple virtual machine monitors to handle privileged events
BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...
- 11.Cocos2dx2.2下使用JNI技术调用jar包里面的一些方法遇到的一些问题及解决方式。
<span style="font-family: Arial, Helvetica, sans-serif;">步骤一:导入JniHelper.h头文件.</s ...
- ThinkPHP视图查询
ThinkPHP视图查询 一.总结 1.这里的视图查询和多表查询很像,当然多表查询的话肯定要支持左右链接查询 2.view:视图的使用,关键字是view 3.sql视图功能支持:thinkphp支持视 ...
- vue配置路由
1,首先用vue-cli搭建vue项目.这个我就不细说了,详见以前的博客 2,npm安装vue-router 3.打开router文件加下的index.js 4.导入你想跳转的组件. import z ...
- 【hdu 6194】string string string
[链接]h在这里写链接 [题意] 给你一个字符串s以及一个整数k; 让你找出这个字符串里面,恰好出现了k次的子串的个数. k>=1 [题解] 后缀数组题. 对于输入的字符串.求出它的Height ...