Witajcie, napisałem stoper, który ma za zadanie pomijać błędy wynikające z kompilacji(wcześniejsza opcja, przez przebieg obliczeń miała opóźnienie ok 20sekund na minute).
Pytanie, w jaki sposób zrobić po pauzie i ponownym wystartowaniu, aby nie przeskakiwał do bieżącego upływu czasu tylko , aby nowy czas był równy (nowy czas)-(odstęp między starym czasem w momencie zatrzymania a nowym czasem)=(stary czas w momencie zatrzymania)++
Myślałem coś na zasadzie w momencie zatrzymania pobieram aktualny czas i przypisuję tą wartość dla pauza (liczy mi czas w tle) i potem różnica = (nowy czas)-(pauza)=(stary_czas)++ ---->rusza dalej z tego miejsca w którym zatrzymałem.
Siędze nad tym od wczoraj i kminie i zmieniam. Może ktoś odpali ten kod i zobaczy o co chodzi?
index.html
<!-- Stoper-->
<!-- Program odmierza czas -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Stoper</title>
</head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.panel {
position: absolute;
width: 100vw;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 60px;
text-align: center;
font-family: monospace;
}
button {
font-size: 44px;
margin: 30px;
padding: 0 10px;
}
.clock {
font-weight: bold;
font-size: 50px;
text-align: center;
line-height: 100vh;
}
span {
font-weight: bold;
font-family: monospace;
}
</style>
<body>
<button class="main">Start</button>
<button class="stop" id="demo" onclick="myFunction()">Stop</button>
<button class="reset">Reset</button>
<div class="panel">
<span class="d"></span>d:
<span class="h"></span>h:
<span class="m"></span>m:
<span class="s"></span>s,
<span class="ms"></span>
</div>
</body>
<script src="js/main.js"></script>
</html>
js/main.js
let nowTime = new Date().getTime();
let time = 0; //
let active = false; // flaga statująca
let idI; // identyfikator funkcji setInter
const btnTime = document.querySelector(".main");
const btnReset = document.querySelector(".reset");
// Zmienne dla poszczególnych wartości czasu i przypisanie dla poszczególnych elementów
const spanMS = document.querySelector("span.ms");
const spanS = document.querySelector("span.s");
const spanM = document.querySelector("span.m");
const spanH = document.querySelector("span.h");
const spanD = document.querySelector("span.d");
// Zmienne dla poszczególnych wartości czasu i przypisanie dla poszczególnych elementów
//Mechanizm aktualizowania czasu
const start = () => {
if (!active) {
active = !active;
btnTime.textContent = "Pauza";
idI = setInterval(() => {
let milisecound = Math.floor(
(((new Date().getTime() - nowTime) / 1000) % 1) * 10
);
// console.log(milisecound)
let secound =
Math.floor(Math.floor((new Date().getTime() - nowTime) / 1000)) % 60;
// console.log(secound);
let minute =
Math.floor(Math.floor((new Date().getTime() - nowTime) / 1000) / 60) %
60;
// console.log(minute);
let hour =
Math.floor(
Math.floor((new Date().getTime() - nowTime) / 1000) / 60 / 60
) % 24;
// console.log(hour);
let days = Math.floor(
Math.floor((new Date().getTime() - nowTime) / 1000) / 60 / 60 / 24
);
// console.log(days);
spanMS.textContent = milisecound;
spanS.textContent = secound;
spanM.textContent = minute;
spanH.textContent = hour;
spanD.textContent = days;
});
} else {
active = !active;
btnTime.textContent = "Start";
clearInterval(idI);
}
};
//Funkcja startująca
// const timer = () => {
// if (!active) {
// active = !active;
// btnTime.textContent = "Pauza";
// setInterval(start, 10);
// console.log(time);
// } else {
// active = !active;
// btnTime.textContent = "Start";
// time === 0;
// console.log(time);
// clearInterval();
// }
// };
//Funkcja startująca
// const start = () => {
// // time++;
// // panel.textContent = (time / 100).toFixed(2);
// };
const reset = () => {
// console.log("klikam reset");
};
// Pobieranie przycisków dla startu i resetu
btnTime.addEventListener("click", start);
btnReset.addEventListener("click", reset);
// Pobieranie przycisków dla startu i resetu
// let nowTime = new Date().getTime();
// let time = 0; //
// let active = false; // flaga startująca
// let idI; // identyfikator funkcji setInter
// let pauza;
// //identyfikator funkcji interwal po wznowieniu
// //Pobieramy przycisku dokumentu html
// const btnStart = document.querySelector(".start");
// const btnStop = document.querySelector(".stop");
// const btnReset = document.querySelector(".reset");
// // Zmienne dla poszczególnych wartości czasu i przypisanie dla poszczególnych elementów
// const spanMS = document.querySelector("span.ms");
// const spanS = document.querySelector("span.s");
// const spanM = document.querySelector("span.m");
// const spanH = document.querySelector("span.h");
// const spanD = document.querySelector("span.d");
// // Zmienne dla poszczególnych wartości czasu i przypisanie dla poszczególnych elementów
// const newIdI = new Date().getTime();
// //Aktualizowanie zmiennych po ponownym wznowieniu
// //Mechanizm aktualizowania czasu
// const start = () => {
// console.log(start);
// // console.log("klikam start");
// if (!active) {
// active = !active;
// btnStart.textContent = "Pauza";
// // console.log(btnTime.textContent);
// idI = setInterval(() => {
// let milisecound = Math.floor(
// (((new Date().getTime() - nowTime) / 1000) % 1) * 10
// );
// // console.log(milisecound);
// let secound =
// Math.floor(Math.floor((new Date().getTime() - nowTime) / 1000)) % 60;
// // console.log(secound);
// let minute =
// Math.floor(Math.floor((new Date().getTime() - nowTime) / 1000) / 60) %
// 60;
// // console.log(minute);
// let hour =
// Math.floor(
// Math.floor((new Date().getTime() - nowTime) / 1000) / 60 / 60
// ) % 24;
// // console.log(hour);
// let days = Math.floor(
// Math.floor((new Date().getTime() - nowTime) / 1000) / 60 / 60 / 24
// );
// // console.log(idI);
// spanMS.textContent = milisecound;
// spanS.textContent = secound;
// spanM.textContent = minute;
// spanH.textContent = hour;
// spanD.textContent = days;
// });
// // console.log(new Date().getTime());
// } else {
// active = !active;
// btnStart.textContent = "Start";
// }
// };
// const stop = () => {
// // console.log("klikam stop");
// time = 0;
// const pauzen = myFunction();
// };
// const reset = () => {
// console.log("klikam reset");
// clearInterval();
// };
// // // =======funkcje======
// function myFunction() {
// document.getElementById("demo");
// let diff = new Date().getTime();
// console.log(diff);
// }
// // // =======funkcje======
// function myFunction2() {}
// // // =======funkcje======
// function myFunction3() {}
// Pobieranie przycisków dla startu i resetu
// btnTime.addEventListener("click", timer);
// btnStart.addEventListener("click", start);
// btnStop.addEventListener("click", stop);
// btnReset.addEventListener("click", reset);
// document.getElementById("demo").addEventListener("click", myFunction);
// // Pobieranie przycisków dla startu i resetu