Pisze sobie prostą aplikacje odliczającą czas tylko problem polega na tym od czego w JS powinieniem zacząć pisać taką aplikacje. Jakie funkcje powinienem w niej zawrzeć aby działała poprawne. Jest to aplikacja odliczająca czas do końca roku. Czyli przykładowe funkcje jakie się w niej powinny znaleźć to np. funkcja która pobiera mi aktualną date i czas, funkcja która sprawdza ile dni liczy dany rok. Bo żeby sprawdzić ile dni zostało do końca roku to też muszę wiedzieć bo przecież co cztery lata mamy rok przestępny czyli jest albo 366 albo 365 dni w roku. Co jeszcze w takiej aplikacji mógłbym zawrzeć. Macie jakieś pomysły? Na początek chce napisać podstawową funkcjonalność a dopiero potem jakieś dodatki
0
1
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?
3
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.
0
Chodzi mi o coś takiego https://codepen.io/nikita1/full/NeNOmZ
0
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?
0
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();
0
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
0
Ale co ta funkcja getDate ma robić?
1
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?
0
const days = document.querySelector('#days');
const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');
function getDate() {
let date = new Date().getFullYear() + 1;
let days = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
}
1
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.
1
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
0
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ł.
0
Tylko czemu nic sie nie wyświetla. Biorę console.log i nic. Więc co jest nie tak. Nie korzystam na codzień z jsfiddle
1
To pokaż kod, który zawiera console.log, sprawdzimy.
1
Dobra ok, już nie ważne. Wyświetla się
O to chodzi ? https://jsfiddle.net/Lxhcbwov/12/
1
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.
0
Wybacz. Wkleiłem okrojoną wersję kodu. Teraz powinno być już ok https://jsfiddle.net/1xyq84ne/
1
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).
0
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.
0
Rozumiem. To teraz:
- dodaj wyświetlanie godzin, minut i sekund do tego, co już się wyświetla;
- fragment
setInterval(getDate, 5000);zmień nasetInterval(getDate, 1000);, żeby czas odliczał się co sekundę.
1
Czy tak https://jsfiddle.net/b09uhs38/6/? Czy o to chodzi?
0
@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
0
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
2
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 0000 (ostatnie dwa zera to sekundy). Użyj kodu const comingDate = new Date("January 1, 2022 00:00:00").
3
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:
- Utwórz element HTML
<div></div>. Niech ten element ma atrybutido wartościcounter. - 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.
- Skorzystaj z metody
getTime()i oblicz różnicę między liczbą milisekund, jaka reprezentuje jedną datę, a liczbą milisekund, jaka reprezentuje drugą. - Zrób tak, żeby ta różnica wyświetlała się w tym elemencie
<div>.
1
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?
0
Punkt 1 i 2 prawdopodobnie dobrze (to ocenię ostatecznie, jak dasz link do JSFiddle). :)
Punkty 3 i 4 nie do końca:
- Metoda
getTime()nie przyjmuje parametrów, a Ty wywołujesz ją z parametremcomingDate. W pseudokodzie, na logikę, to, co robisz, ma sens, ale język JavaScript działa inaczej. - 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 zmiennejcomingDate.
Tak więc, podsumowując:
- Przeczytaj, proszę, dokumentację metody
getTime(): https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Date/getTime - Spróbuj napisać kod jeszcze raz, poprawnie wywołując metodę
getTime(bez parametru), tak, żeby różnica między datamidateacomingDatebyła obliczana w jednej linijce. - 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ąć).