Я хочу создать секундомер, который имеет функцию возобновления, например, если мне придется приостановить просмотр, тогда после загрузки страницы он покажет мое последнее время выполнения и начнется с моего последнего раза, когда я возобновлю его (он будет в состоянии паузы). ) Примечание: Это также будет в рабочем состоянии после загрузки страницы. Если я не сделал паузу в этом
Я попробовал это [stopwatch][1] с некоторой ссылкой, так что я могу управлять условиями работы, если часы не остановлены, но я не нахожу подходящего решения, когда часы приостановлены, и я перезагружаю страницу. Я покажу свое последнее приостановленное время и возобновлю отсюда, если я возобновлю его снова ...
Мой HTML Код здесь
<!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 файл stopWatch. js
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;
}
}