Aplikacja odliczająca czas

https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date

Tak tylko mi chodzi o to żeby sobie rozpisać poszczególne elementy składowe jakie się mają znaleźć w tej aplikacji żeby poprawnie działała. Co się powinno znaleźć w takiej aplikacji. Na początek powinienem napisać sobie funkcje która pobiera mi aktualną date i godzine. Może być czy powinno być coś wcześniej?

https://www.w3schools.com/jsref/jsref_obj_date.asp

Stworzyć nowy obiekt date z domyślnym, aktualnym czasem.
Odczytać z niego aktualny rok.
Odczytany rok powiększyć o jeden.

Stworzyć kolejny obiekt date z parametrami: Date(odczytany-rok+1, 0, 1).
Pobrać z niego liczę sekund czasu uniksowego.

W pętli setInterval wywoływać cyklicznie:
stworzenie obiektu z aktualną datą,
pobieranie z niego aktualnego czasu uniksowego,
obliczenie różnicy czasu uniksowego na koniec roku i obecnego.
dostajesz liczbę sekund do końca roku.

Chodzi mi o coś takiego https://codepen.io/nikita1/full/NeNOmZ

Napisałem sobie taki obiekt

function getDate() {
	let date = new Date();
	let years = date.getFullYear() + 1;
	let days = date.getDate();
	let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
}

i co dalej?

Napisz od nowa i poczytaj doksy, bo nic nie masz i nie wiesz nawet czego użyć.

Tutaj masz kod JS z tego codepena, co wrzuciłeś.
Jak nic z niego nie rozumiesz... no to czytaj doksy.

const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");

function getTrueNumber(num) {
  return num < 10 ? "0" + num : num;
}

function calculateRemainingTime() {
  const comingYear = new Date().getFullYear() + 1;
  const comingDate = new Date(`Jan 1, ${comingYear} 00:00:00`);

  const now = new Date();
  const remainingTime = comingDate.getTime() - now.getTime();
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor(remainingTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
  const mins = Math.floor(remainingTime % (1000 * 60 * 60) / (1000 * 60));
  const secs = Math.floor(remainingTime % (1000 * 60) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);

  return remainingTime;
}

function initCountdown() {
  const interval = setInterval(() => {
    const remainingTimeInMs = calculateRemainingTime();

    if (remainingTimeInMs <= 1000) {
      clearInterval(interval);
      initCountdown();
    }
  }, 1000);
}

initCountdown();

Ogólnie zastanawiam się co powinienem zmienić jeszcze w tej funkcji

function getDate() {
	let date = new Date();
	let years = date.getFullYear() + 1;
	let days = date.getDate();
	let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
}

aby gdy zakończy się luty i będzie np 29.02 nie było 30.02

Ale co ta funkcja getDate ma robić?

Napisałeś wyżej, że chcesz zrobić dynamiczne odliczanie nowego roku w htmlu, przy użyciu javascriptu, tak jak w codepenie który podesłałeś.

Co chcesz osiągnąć funkcją nie zwracającą żadnych danych, jedynie posiadającą zmienne lokalne i nie aktualizującą elementów w htmlu?

Jak chcesz korzystać z tej funkcji w innych funkcjach?

Słuchaj, a jakby tak zmienić podejście? Zaczęlibyśmy tak: napisz kod, który będzie co sekundę wyświetlał aktualną datę. :) Wszystko jedno w jakim formacie i gdzie (konsola czy element HTML), ale podeślij link do https://jsfiddle.net/, byś zarówno Ty, jak i my widzieli, że działa.

Napisałem to tak https://jsfiddle.net/Lxhcbwov/2/ ale coś mi nie działa. Wyświetla mi się tylko 2 zamiast pełnej daty

OK. Jesteśmy na dobrej drodze, ale widzę jeden podstawowy błąd: nigdzie nic nie jest wyświetlane, jak prosiłem. Popraw, proszę. Po uruchomieniu kodu w JS Fiddle chciałbym coś zobaczyć (w konsoli lub na stronie). :) Cokolwiek, nie musi być to data, może być też to 2 (czemu 2, to sprawdzimy później).

PS Tj. chodzi mi o to, żeby nie trzeba było nic wpisywać, tylko od razu, automatycznie wynik się pokazywał.

Tylko czemu nic sie nie wyświetla. Biorę console.log i nic. Więc co jest nie tak. Nie korzystam na codzień z jsfiddle

To pokaż kod, który zawiera console.log, sprawdzimy.

Dobra ok, już nie ważne. Wyświetla się

O to chodzi ? https://jsfiddle.net/Lxhcbwov/12/

OK, dobrze, wyświetla się. :)

Teraz główny problem jest taki, że nie uruchamia się wyświetla się co sekundę. W poprzednim kodzie użyłeś funkcji setInterval; to było dobre posunięcie, tylko brakowało wyświetlania. Tutaj masz wyświetlanie, ale nie widzę setInterval.

Wybacz. Wkleiłem okrojoną wersję kodu. Teraz powinno być już ok https://jsfiddle.net/1xyq84ne/

OK, dobrze, wyświetla się co 5 sekund. :)

W zasadzie powinienem był zapytać wcześniej: czy wystarczy Ci odliczanie dni, czy też potrzebujesz odliczać co 5 sekund? Pytam, bo w przykładzie, który pokazałeś, jest na przykład odliczanie co sekundę (https://codepen.io/nikita1/full/NeNOmZ).

To znaczy aplikacje którą pisze ma mi odliczać dni więc w sumie może być odliczanie dni ale chciałbym do tego dołożyć jeszcze godziny, minuty, sekundy. Tak jak tutaj https://codepen.io/nikita1/full/NeNOmZ.

Rozumiem. To teraz:

1. dodaj wyświetlanie godzin, minut i sekund do tego, co już się wyświetla;
2. fragment setInterval(getDate, 5000); zmień na setInterval(getDate, 1000);, żeby czas odliczał się co sekundę.

Czy tak https://jsfiddle.net/b09uhs38/6/? Czy o to chodzi?

@Silv: No dobrze. Co dalej? Już mi sporo pomogłeś ale chce napisać już do końca tą aplikacje. Oczywiście nie w całości i że dzisiaj ale chce

Jasne spoko. Nie ma pośpiechu. Teraz co bym zrobił to po prostu zamienił godziny minuty sekundy dni miesiące i rok zamienił na liczby. Czyli z poszczególnych elementów wyciągam sobie liczbe. Jednak żeby to zrobić to musiałbym wykonać stosowne obliczenia

OK, jest tak, jak trzeba. :) Widzę, że zamieniłeś miejscami minuty z sekundami, ale w sumie to nie ma znaczenia dla ostatecznego działania całości.

Ja bym zrobił coś innego, niż piszesz. Wyświetl teraz razem z poprzednimi informacjami – może być zaraz po nich – datę, do której chcesz odliczać, czyli 1 stycznia 2022, godzina 00:00:00 (ostatnie dwa zera to sekundy). Użyj kodu const comingDate = new Date("January 1, 2022 00:00:00").

Tak? https://jsfiddle.net/jo21k8ub/

Jest dobrze. :)

Teraz należałoby obliczyć czas między tymi dwiema datami, które wyświetlasz – bieżącą i nadchodzącą. Ale widzę, że linijka w konsoli robi się długa. ;) Tak więc zrobimy dwie rzeczy: obliczymy czas i przeniesiemy tekst w konsoli na stronę, by było łatwiej widzieć wyniki.

Co do pierwszej rzeczy, czyli obliczania czasu, trochę szczegółów: masz w kodzie dwie zmienne: date, która przechowuje bieżącą datę, oraz comingDate, która przechowuje datę nadchodzącą. A będziemy obliczać czas w różnych jednostkach – dniach, godzinach, minutach i sekundach (tak, jak w oryginalnym liczniku Nikity). Ze względu na to, jak JavaScript reprezentuje czas, najlepiej wybrać jakąś jedną jednostkę, tzw. jednostkę bazową. Niech będą nią milisekundy. Każda data w JavaScripcie może być reprezentowana w milisekundach; taką reprezentację możesz uzyskać, korzystając z metody getTime() obiektu Date.

Tak więc, podsumowując, cztery kroki dla Ciebie:

1. Utwórz element HTML <div></div>. Niech ten element ma atrybut id o wartości counter.
2. Zrób tak, żeby to wszystko, co wyświetla się w konsoli co sekundę, wyświetlało się w tym elemencie, także co sekundę. W konsoli niech się już nic nie wyświetla.
3. Skorzystaj z metody getTime() i oblicz różnicę między liczbą milisekund, jaka reprezentuje jedną datę, a liczbą milisekund, jaka reprezentuje drugą.
4. Zrób tak, żeby ta różnica wyświetlała się w tym elemencie <div>.

Mam pytanie odnośnie metody getTime obiektu Date. Mam taki kod w js

function getDate() {
	const txtInDiv = document.getElementById('counter');
  const date = new Date();
	const comingDate = new Date("January 1, 2022 00:00:00");
  const day = date.getDate(comingDate);
  const month = date.getMonth(comingDate) + 1;
  const year = date.getFullYear(comingDate);
	const hours = date.getHours(comingDate);
	const minutes = date.getMinutes(comingDate);
	const seconds = date.getSeconds(comingDate);
  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();

i mówisz że powinienem skorzystać z metody getTime() obiektu Date(). Czyli najprościej rzecz ujmująć ten kod powinien wyglądać w tej funkcji teraz 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(comingDate);
        const month = date.getTime(comingDate) + 1;
        const year = date.getTime(comingDate);
	const hours = date.getTime(comingDate);
	const minutes = date.getTime(comingDate);
	const seconds = date.getTime(comingDate);
  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();
```.
Czy tak?

Punkt 1 i 2 prawdopodobnie dobrze (to ocenię ostatecznie, jak dasz link do JSFiddle). :)

Punkty 3 i 4 nie do końca:

1. Metoda getTime() nie przyjmuje parametrów, a Ty wywołujesz ją z parametrem comingDate. W pseudokodzie, na logikę, to, co robisz, ma sens, ale język JavaScript działa inaczej.
2. Niezależnie od powyższego, chcesz wywoływać tę metodę osobno dla dni, osobno dla miesięcy i tak dalej. Można by tak zrobić, tylko mnie chodziło o coś innego. Chciałem, żeby w Twoim kodzie była tylko jedna linijka, w której obliczysz różnicę między czasem zapisanym w zmiennej date, a czasem zapisanym w zmiennej comingDate.

Tak więc, podsumowując:

1. Przeczytaj, proszę, dokumentację metody getTime(): https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/getTime
2. Spróbuj napisać kod jeszcze raz, poprawnie wywołując metodę getTime (bez parametru), tak, żeby różnica między datami date a comingDate była obliczana w jednej linijce.
3. Wyświetl tę różnicę (dodaj ją do pozostałych informacji, które już się wyświetlają).

PS Jeśli niezbyt jasno piszę, o co mi chodzi, to napisz, to podam od razu kod (chciałbym takiego podawania kodu uniknąć).