Aplikacja odliczająca czas

Rozumiem że ten kod powinien wyglądać tak?:

function getDate() {
    const txtInDiv = document.getElementById('counter');
  const date = new Date();
    const comingDate = new Date("January 1, 2022 00:00:00");
        const day = date.getTime();
        const month = date.getTime() + 1;
        const year = date.getTime();
    const hours = date.getTime();
    const minutes = date.getTime();
    const seconds = date.getTime();
  if (month < 10) {
    txtInDiv.innerHTML = 'Dziś jest ' + day + '.' + '0' + month + '.' + year + ' . Teraz jest godzina ' + hours + ':' + minutes + ':' + seconds + ' . Odliczanie do ' + comingDate + '';
  } else {
        txtInDiv.innerHTML = 'Dziś jest ' + day + '.' + '0' + month + '.' + year + ' . Teraz jest godzina ' + hours + ':' + minutes + ':' + seconds + ' . Odliczanie do ' + comingDate + '';
  }
}

function currentDate() {
  const myDate = setInterval(getDate, 1000);
  return myDate;
}
currentDate();

Pytam bo chce mieć 100% pewność. Za nic nie dawaj mi kodu

Usunąłeś parametr, to jest dobrze.

Nadal jednak nie obliczasz różnicy. Żeby to zrobić, musisz wywołać metodę getTime dwa razy: oddzielnie dla obiektu date i oddzielnie dla obiektu comingDate. Dzięki temu otrzymasz dwie liczby całkowite. Różnica między nimi oznacza odjęcie jednej od drugiej. Tobie pozostawiam, której od której. :)

Wiesz gdzie może być problem? https://jsfiddle.net/ntgv3kys/. Nic się nie wyświetla na stronie. Nie podawaj mi kodu

Nie wyświetla się, ponieważ nie są spełnione warunki, dla których ma się wyświetlać. Moim zdaniem, żeby było i poprawnie, i czytelnie, na razie usuń (albo zakomentuj, jak chcesz) wszystkie warunki, czyli if (month < 10), if (minutes < 10) oraz if (seconds < 10).

PS To znaczy teraz masz 3 kody wyświetlające, po jednym w każdym warunku. Warunki usuń/zakomentuj, a kod wyświetlający niech będzie tylko 1 (a nie 3). :)

No dobrze. Teraz mamy coś takiego https://jsfiddle.net/n1ayt3c0/. Co jeszcze trzeba poprawić? Sorry że ci zawracam głowe ale zależy mi na tym

No, jak utworzysz date z różnicy pomiędzy dniem dzisiejszym, a poczatkiem nowego roku, czyli < 1rok, to wiadomo ze glupoty ci wyjda.

Tutaj kompletnie zle myslisz.

@urke: no, nie tak kompletnie źle, bo matematycznie ma to sens.

@piotrek1998: dobrze, wyświetla się tak, jak powinno. :) Różnicę obliczasz także dobrze. Tylko problemem jest, jak napisał @urke , że z tej różnicy tworzysz datę (a konkretnie obiekt Date). Nie ma to logicznie sensu (choć czysto matematycznie ma), ani nie ma sensu w JavaScripcie. Różnica powinna być w wyniku liczbą, nie datą, bo właśnie liczba będzie nam później potrzebna. Zmień więc kod tak, by nie była to data, tylko liczba.

O to chodzi? https://jsfiddle.net/n1ayt3c0/1/

Teraz wydaje mi się że powinienem tą liczbę co otrzymałem odpowiednio rozłożyć na dni, godziny, sekundy i policzyć to odpowiednio w JS

Pozostały czas masz podany w milisekundach, a to już bardzo łatwo przekonwertować, na dni i godziny, wiedzac ile sekund ma minuta, ile minut ma godzina itd

Tak, dobrze jest. :) Żeby kod lepiej było czytać, możesz zmienić jeszcze nazwę zmiennej z differenceDate na difference. No bo differenceDate przetłumaczyłbym jako data różnicy, a nam chodzi raczej o samą różnicę.

Dobrze myślisz. :) Zaczniemy od największych jednostek. Ponieważ nie jestem pewien, czy obliczenia nie będą zbyt skomplikowane, najlepiej, żebyś nie wyświetlał miesięcy – tylko dni, godziny, minuty i sekundy. Zacznij od największych jednostek, czyli dni.

Ta liczba, którą mamy, jest to liczba milisekund od chwili bieżącej aż do końca roku. Żeby uzyskać dni (u nas będą to konkretnie doby), powinieneś, jak napisał @urke , obliczyć ile milisekund jest w sekundzie, sekund jest w minucie, ile minut w godzinie oraz ile godzin w dobie. I przez te wszystkie cztery wartości podzielić tę liczbę.

Chciałbym policzyć to wszystko w odrębnej funkcji, więc sobie napisałem osobną funkcje

function getDate() {
	var txtInDiv = document.getElementById('counter');
  var date = new Date();
	var comingDate = new Date("January 1, 2022 00:00:00");
  var day = date.getTime();
  var year = date.getTime();
	var hours = date.getTime();
	var minutes = date.getTime();
	var seconds = date.getTime();
	var diffrence = Math.abs(comingDate.getTime() - date.getTime());
  txtInDiv.innerHTML = 'Dziś jest ' + day + '.' + '.' + year + ' . Teraz jest godzina ' + hours + ':' + minutes + ':' + seconds + ' . Odliczanie do ' + comingDate + ' . Różnica między 	datami ' + diffrence + '';
}

function currentDate() {
  const myDate = setInterval(getDate, 1000);
  return myDate;
}

currentDate();

function calculateRemainingDate(){
	const displayTxt = getDate;
	day = Math.floor(diffrence / (1000*60*60*24));
	hours = Math.floor((diffrence % (1000*60*60*24)) / (1000*60*60));
	minutes = Math.floor((diffrence % (1000*60*60)) / (1000*60));
	seconds = Math.floor((diffrence % (1000*60)) / 1000);
	return displayTxt;
}
calculateRemainingDate();

tylko dlaczego dostaję błąd taki błąd https://jsfiddle.net/5z02gdxf/. Przecież w tej funkcji calculateRemainingDate() przypisuje do zmiennej całe ciało funkcji getDate(). Mógłbym w tym przypadku użyć this?

No mam coś takiego https://jsfiddle.net/o9rv0fma/. Co jest nie tak? Mogę prosić o podpowiedź?

Chciałbym policzyć to wszystko w odrębnej funkcji, więc sobie napisałem osobną funkcje

Dobry pomysł. Rozdzielanie kodu na osobne funkcje to dobra praktyka programistyczna. :)

tylko dlaczego dostaję błąd taki błąd https://jsfiddle.net/5z02gdxf/.

Nie widzę w tym linku wyświetlającego się błędu (w kodzie są błędy).

Przecież w tej funkcji calculateRemainingDate() przypisuje do zmiennej całe ciało funkcji getDate().

Nie powiedziałbym, że przypisujesz ciało funkcji, tylko obiekt funkcji.

Mógłbym w tym przypadku użyć this?

Nie rozumiem. Jakie this masz na myśli?

No mam coś takiego https://jsfiddle.net/o9rv0fma/. Co jest nie tak? Mogę prosić o podpowiedź?

A więc tak – pierwsza sprawa:

let calcDate = calcRemainingDate;

W powyższej linijce najpewniej chcesz przypisać wynik wykonania funkcji calcRemainingDate do zmiennej calcDate. Nie przypisujesz jednak wyniku wywołania, tylko obiekt funkcji. Żeby przypisać wynik wykoniania, musić napisać nawiasy zaraz za nazwą funkcji calcRemainingDate. Podobnie z linijkami:

day = calcRemainingDate;
hours = calcRemainingDate;
minutes = calcRemainingDate;
seconds = calcRemainingDate;

oraz

let displayInDiv = getDate;

Druga sprawa: w funkcji calcRemainingDate używasz obiektu this. W tej funkcji odnosi się on do obiektu Window. Tak więc nie możesz go użyć w tej funkcji. Czemu chcesz go użyć?

Trzecia sprawa: w funkcji calcRemainingDate używasz kodu Math.floor(diffrence / (1000*60*60*24));. To jest poprawny sposób na obliczenie dni pozostających do końca roku, tak. :)

Czwarta sprawa: w funkcji calcRemainingDate używasz kodu Math.floor((diffrence % (1000*60*60*24)) / (1000*60*60)); oblicza on liczbę godzin pozostałych do początku następnego dnia. Nie pisałem Ci o tym jeszcze, dopiero zamierzałem. Czy rozumiesz, co robi tutaj operator %?

Generalnie mam wrażenie, że poprzedni Twój kod był bardziej poprawny (ten z linku https://jsfiddle.net/n1ayt3c0/1/). Czy chcesz wrócić do niego, czy poprawić błędy w tym?

Bardziej chce poprawić błędy w tym. Przynajmniej czegoś się dowiem a poza tym denerwuje mnie pisanie wszystkiego w jednej funkcji

W porządku. Odpowiedz, proszę, na pozostałe powyższe pytania, i będziemy mogli przejść dalej.

Chciałem użyć obiektu this bo gdy chciałem wykonać obliczenia w funkcji calcRemainingDate to dostawałem błąd w związku z diffrence. I nie bardzo rozumiałem dlaczego więc chciałem użyć obiektu this. Jeśli natomiast pytasz o operator modulo % w tym Math.floor((diffrence % (1000606024)) / (100060*60)) to nie bardzo bo przyznam się bez bicia część napisałem sam a część spisałem z neta. Coś jeszcze?

OK, rozumiem.

Jeśli chodzi o słowo kluczowe this, to nie widzę dla niego żadnego zastosowania w tym kodzie. Radziłbym Ci nie używać – wyniki mogą być dziwne (chyba że znajdziesz coś, czego ja nie widzę).

Teraz tak: funkcja getRemainingDate nie przyda nam się, niestety. Możesz ją albo usunąć, albo zakomentować. Zamiast niej zrób funkcję getRemainingMs. Niech ma ona dwa parametry: date oraz comingDate. Przenieś do niej kod let diffrence = Math.abs(comingDate.getTime() - date.getTime()); (ten kod już masz napisany). Następnie zrób, żeby ta funkcja zwracała zmienną difference.

Ok. Gotowe. https://jsfiddle.net/. Teraz tą funkcje

function getRemainingMs(date, comingDate){
	 let diffrence = Math.abs(comingDate.getTime() - date.getTime());
	 return diffrence;
}

wywołuje w funkcji getDate()?

Dobrze. :)

Teraz wywołaj tę fukcję w funkcji getDate, tak. Zamień wszystkie wystąpienia date.getTime() na wywołania funkcji getRemainingMs z argumentami date oraz comingDate.

https://jsfiddle.net/3m1tfzj0/2/

Dobrze! :)

Teraz po kolei, bez pośpiechu. Jak widzisz, obecnie zamiast dni, godzin, minut i sekund wyświetla się liczba milisekund do końca roku. Najpierw wyświetlimy poprawną liczbę dni do końca roku. Zapytam jeszcze raz, tylko napisz już tutaj na forum, bez kodu:

1. ile jest milisekund w sekundzie?
2. ile jest sekund w minucie?
3. ile jest minut w godzinie?
4. ile jest godzin w dobie?

1ms = 1/1000s 2. 60s = 1min 3. 1godz = 60min 4. 24godz

OK, poprawnie.

Teraz: żeby uzyskać liczbę sekund do końca roku, trzeba podzielić liczbę milisekund przez 1000. Żeby uzyskać liczbę minut do końca roku z liczby sekund, trzeba podzielić liczbę sekund przez 60. Żeby uzyskać liczbę godzin do końca roku z liczby minut, trzeba podzielić liczbę minut przez 60. Żeby uzyskać liczbę dni (a właściwie dób) do końca roku, trzeba podzielić liczbę godzin przez 24.

Czyli, teraz już w kodzie, dla zmiennej day wywołanie getRemainingMs(date, comingDate) podziel przez 1000, przez 60, jeszcze raz przez 60 i na końcu przez 24. Niech te wszystkie dzielenia będą w jednej linijce.

https://jsfiddle.net/3m1tfzj0/4/

OK.

Przejdźmy teraz do kwestii, dlaczego trzeba użyć operatora %. Ten operator zwraca resztę z dzielenia. Czyli, na przykład, 5 % 2 będzie równe 1, bo 2 mieści się całkowicie dwa razy w 5 i zostaje 1 (2 + 2 + 1 = 5). Albo, drugi przykład, 12 % 3 będzie równe 0, bo 3 mieści się całkowicie cztery razy w 12 i nic nie zostaje (3 + 3 + 3 + 3 = 12).

Czy to rozumiesz? To jest ważna rzecz.

https://jsfiddle.net/3m1tfzj0/5/. Jeszcze coś powiniśmy dodać czy to już wszystko?

Jeżeli rozumiesz wszystko, co się dzieje w kodzie, to byłoby wszystko. Jeśli masz jakieś pytania, pytaj.

Może tylko dopiszę wyjaśnienie, na wszelki wypadek: żeby obliczyć liczbę godzin do końca roku, trzeba podzielić liczbę milisekund przez 1000, potem przez 60, i jeszcze raz przez 60. Prawie tak samo jak liczbę dni, tylko bez dzielenia przez 24 na końcu. No, ale my nie potrzebujemy liczby godzin od teraz do końca roku, tylko liczby godzin od teraz do następnego dnia. Właśnie z tego powodu trzeba użyć operatora %. Żeby więc obliczyć liczbę godzin do początku następnego dnia (czyli do godz. 00:00), trzeba sprawdzić, ile jest dni do końca roku, a następnie operatorem % sprawdzić, ile zostaje. Ponieważ wynik będzie w milisekundach, to trzeba ten wynik podzielić jeszcze raz przez 60, potem 60, a na końcu 1000, żeby uzyskać liczbę godzin. Podobnie dla minut i sekund.

Jasne. Jeszcze raz wielkie dzięki. Sporo pomogłeś i sorry że zabrałem tyle czasu

Spoko. Po to jest forum, by uzyskać rozwiązanie swojego problemu. :)