• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stoper- pobieranie różnicy czasu między zatrzymaniem i ponownym startem

VPS Starter Arubacloud
0 głosów
175 wizyt
pytanie zadane 28 marca 2020 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 p.)
zmienione kategorie 28 marca 2020 przez Grzegorz Mikina

 

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

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 233 wizyt
0 głosów
1 odpowiedź 1,454 wizyt
pytanie zadane 5 listopada 2016 w JavaScript przez Radekol Bywalec (2,880 p.)
0 głosów
2 odpowiedzi 244 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...