Javascript 页面加载后具有恢复功能的秒表
我想创建一个秒表，它有一个恢复功能，比如如果我必须暂停我的手表，那么在页面加载后，它将显示我的上次运行时间，并在我恢复它时从我的上次开始（它将处于暂停状态） 注意： 如果我没有暂停它，它也将在页面加载后处于运行状态 我已经尝试了这个Javascript 页面加载后具有恢复功能的秒表,javascript,php,stopwatch,time-tracking,Javascript,Php,Stopwatch,Time Tracking,我想创建一个秒表，它有一个恢复功能，比如如果我必须暂停我的手表，那么在页面加载后，它将显示我的上次运行时间，并在我恢复它时从我的上次开始（它将处于暂停状态） 注意： 如果我没有暂停它，它也将在页面加载后处于运行状态 我已经尝试了这个[stopwatch][1]，并提供了一些参考资料，因此如果手表没有暂停，我能够管理运行条件，但我没有找到任何合适的解决方案，以便在手表暂停和重新加载页面时，我将显示我上次暂停的时间，如果我再次恢复，我将从这里继续 我的HTML代码在这里 <!DOCTYPE h
[stopwatch][1]<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS Stopwatch - Javascript Stopwatch</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<style>
#timerContainer {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
width:700px;
margin:20px auto;
min-height: 60px;
border-top:0px;
}
.timer, .reset {
float:left;
width: 54%;
padding: 20px 0;
font-size: 24px;
text-align:center;
color: #fff;
background: #A90000;
cursor: pointer
}
.reset {
background: #550000;
color: white;
width:14.9%;
border-left: 1px solid #990000;
}
.reset:hover {
background: #CC0000;
}
.lighter {
background: #CC0000
}
</style>
</head>
<body>
<div id="timerContainer">
<div class="timer" onclick="startTimer()">Start Studying!</div>
<div class="startTimer reset" onclick="startTimer()" >
<i class="fas fa-play"></i>
</div>
<div class="pauseTimer reset" onclick="pauseTimer()" >
<i class="fas fa-pause"></i>
</div>
<div class="resetTimer reset" onclick="resetTimer()">Reset</div>
</div>
<script type="text/javascript" src="stopWatch.js"></script>
</body>
</html>
香草JS秒表-Javascript秒表
#时间容器{
字体系列：“源Sans-Pro”，无衬线；
字体大小：300；
宽度：700px；
保证金：20px自动；
最小高度：60px；
边框顶部：0px；
}
.计时器，.重置{
浮动：左；
宽度：54%；
填充：20px0；
字体大小：24px；
文本对齐：居中；
颜色：#fff；
背景：#A90000；
光标：指针
}
.重置{
背景：55万；
颜色：白色；
宽度：14.9%；
左边框：1px实心#990000；
}
.重置：悬停{
背景：#CC0000；
}
.打火机{
背景：#CC0000
}
开始学习！
重置
var startTimerButton = document.querySelector('.startTimer');
var pauseTimerButton = document.querySelector('.pauseTimer');
var timerDisplay = document.querySelector('.timer');
var start = false;
var pause = false;
var stop = false;
var Clock = {
totalSeconds: times(),
start: function () {
var self = this;
this.interval = setInterval(function () {
self.totalSeconds += 1;
var hours = Math.floor((self.totalSeconds / 3600));
var minutes = Math.floor((self.totalSeconds / 60 % 60 ));
var seconds = Math.floor((self.totalSeconds % 60 ));
hours = (hours < 10) ? "0" + hours : hours;
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
$(".timer").html(hours + ':' + minutes + ':' + seconds);
}, 1000);
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
reset: function () {
if (!this.interval && !this.start()) {clearInterval(this.interval); this.reseter();}
},
reseter: function(){
var self = this;
self.totalSeconds = 0;
$(".timer").html("00:00:00");
},
pauseTracker:function() {
var self = this;
var tracker_started = check_cookie_name("tracker_started");
var tracker_paused = check_cookie_name("tracker_paused");
start_time_last = ( tracker_paused - tracker_started ) / 1000;
self.totalSeconds = start_time_last;
$(".timer").html("00:00:00");
}
};
//
function startTracker(argument)
{
if (start == false)
{
Clock.start();
if (!check_cookie_name("tracker_started")) {
document.cookie = "tracker_started="+new Date().getTime()+"; expires=Thu, 18 Dec 2020 12:00:00 UTC; path=/";
}
pause = false;
}
start = true;
}
function pauseTimer(argument)
{
if (pause == false)
{
Clock.pause();
document.cookie = "tracker_paused="+new Date().getTime()+"; expires=Thu, 18 Dec 2020 12:00:00 UTC; path=/";
start = false;
}
pause = true;
stop = false;
}
function resetTimer(argument)
{
if (stop == false && start == false && pause == true)
{
document.cookie = "tracker_started="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
document.cookie = "achtimerstart="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
document.cookie = "achtimerid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
document.cookie = "achtid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
document.cookie = "achpid="+new Date().getTime()+"; expires=Thu, 18 Dec 2019 12:00:00 UTC; path=/";
Clock.reset();
start = false;
pause = false;
swal({title: "success", text: "Time has been locked successfully!", type: "success"},
function(){
location.reload();
});
}
stop = true;
}
function check_cookie_name(name)
{
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
return (match[2]);
}
else{
console.log('--something went wrong---');
}
}
function startTimer(){
if (start == false && pause == true) {
startTracker();
return false;
}
}
function times(){
var tracker_started = check_cookie_name("tracker_started");
if (tracker_started) {
var current = new Date().getTime();
start_time_last = ( current - tracker_started ) / 1000;
setTimeout(function(argument) {
startTracker();
},500);
return start_time_last;
}else{
return 0;
}
}
var startTimerButton=document.querySelector（'.startTimer'）；
var pauseTimerButton=document.querySelector（'.pauseTimer'）；
var timerDisplay=document.querySelector（'.timer'）；
var start=false；
var暂停=假；
var-stop=false；
变量时钟={
totalSeconds:times（），
开始：函数（）{
var self=这个；
this.interval=setInterval（函数（）{
self.totalSeconds+=1；
var小时=数学地板（（自我总秒/3600））；
var分钟=数学地板（（自我总秒/60%60））；
var秒数=数学地板（（self.totalSeconds%60））；
小时数=（小时数<10）？“0”+小时数：小时数；
分钟=（分钟<10）？“0”+分钟：分钟；
秒=（秒<10）？“0”+秒：秒；
$（“.timer”）.html（小时+”：“+分钟+”：“+秒）；
}, 1000);
},
暂停：函数（）{
clearInterval（这个.interval）；
删除此.interval；
},
恢复：功能（）{
如果（！this.interval）this.start（）；
},
重置：功能（）{
如果（！this.interval&&！this.start（））{clearInterval（this.interval）；this.reset（）；}
},
重置器：函数（）{
var self=这个；
self.totalSeconds=0；
$（“.timer”）.html（“00:00:00”）；
},
pauseTracker:函数（）{
var self=这个；
var tracker_started=检查cookie_名称（“tracker_started”）；
var tracker_paused=检查cookie_名称（“tracker_paused”）；
开始时间上次=（跟踪器暂停-跟踪器启动）/1000；
self.totalSeconds=开始时间最后一次；
$（“.timer”）.html（“00:00:00”）；
}
};
//
函数startTracker（参数）
{
if（start==false）
{
Clock.start（）；
如果（！检查cookie\u名称（“跟踪程序已启动”））{
document.cookie=“tracker_start=“+new Date（）.getTime（）+”；expires=Thu，2020年12月18日12:00:00 UTC；path=/”；
}
暂停=错误；
}
开始=真；
}
函数pauseTimer（参数）
{
如果（暂停==false）
{
时钟暂停（）；
document.cookie=“tracker_paused=“+new Date（）.getTime（）+”；expires=Thu，2020年12月18日12:00:00 UTC；path=/”；
开始=错误；
}
暂停=正确；
停止=错误；
}
函数重置计时器（参数）
{
if（stop==false&&start==false&&pause==true）
{
document.cookie=“tracker_start=“+new Date（）.getTime（）+”；expires=Thu，2019年12月18日12:00:00 UTC；path=/”；
document.cookie=“achtimerstart=“+new Date（）.getTime（）+”；expires=Thu，2019年12月18日12:00:00 UTC；path=/”；
document.cookie=“achtimerid=“+new Date（）.getTime（）+”，expires=Thu，2019年12月18日12:00:00 UTC；path=/”；
document.cookie=“achtid=“+new Date（）.getTime（）+”，expires=Thu，2019年12月18日12:00:00 UTC；path=/”；
document.cookie=“achpid=“+new Date（）.getTime（）+”，expires=2019年12月18日星期四UTC 12:00:00；path=/”；
时钟复位（）；
开始=错误；
暂停=错误；
swal（{title:“success”，text:“时间已成功锁定！”，键入：“success”}，
函数（）{
location.reload（）；
});
}
停止=真；
}
函数检查\u cookie\u名称（名称）
{
var match=document.cookie.match（新的RegExp（'（^ |）'+name+'=（[^；]+））；
如果（匹配）{
返回（匹配[2]）；
}
否则{
log（'--something出错了---'）；
}
}
函数startTimer（）{
if（start==false&&pause==true）{
startTracker（）；
返回false；
}
}
功能时间（）{
var tracker_started=检查cookie_名称（“tracker_started”）；
如果（已启动跟踪程序）{
var current=new Date（）.getTime（）；
开始时间最后一次=（当前-跟踪器开始）/1000；
setTimeout（函数（参数）{
startTracker（）；
},500);
返回上次开始时间；
}否则{
返回0；
}
}
localStoragelocalStorage