[JavaScript] Aktualny czas

Odwiedzając różne strony niekiedy napotykasz na nich aktywny zegar. Pisząc aktywny mam na myśli odliczane dynamicznie (bez przeładowywania strony) godziny, minuty i sekundy. Zegar taki bardzo łatwo napisać w języku JavaScript dzięki obiektowi Date. W tym artykule zajmiemy się właśnie tym obiektem.

Jak już wcześniej wspomniałem do pobierania czasu z naszego komputera poprzez JavaScript służy obiekt Date. Jak więc wyświetlić ten czas? Możliwości jest dużo i generalnie zależy to tylko od widzimisię programisty. W tym wpisie czas wyświetlimy po prostu w znaczniku akapitu p. Dodatkowo damy możliwość mrugania naszemu zegarów.

Skrypt

function showTime()

{

 var time = new Date();
 var hours = time.getHours();
 var minutes = time.getMinutes();
 var seconds = time.getSeconds();
 
 hours = hours < 10 ? hours = '0' + hours : hours;
 minutes = minutes < 10 ? minutes = '0' + minutes : minutes;
 seconds = seconds < 10 ? seconds = '0' + seconds : seconds;
 
 var timeString = hours + ':' + minutes + ':' + seconds;
 
 document.getElementById('time').textContent = timeString;
 
 setTimeout("showTime()", 1000);

}

document.addEventListener("DOMContentLoaded", showTime, false);

Teraz po kolei. Tworzymy sobie funkcję showTime, następnie tworzymy instancje obiektu Date i pobieramy poszczególne elementy czasu. Godziny pobiera metoda getHours, minuty getMinutes, a sekundy metoda getSeconds. W kolejnym kroku musimy do tych wartości dodać wiodące zera, jeśli wartość danego elementu np. godzin jest mniejsza od 10. Niestety JavaScript za nas tego nie robi, a czas w formacie "10:9:1" niezbyt ładnie wygląda. Kolejna linia kodu to utworzenie zwykłego tekstu z aktualną godziną, którą wyświetlimy w naszym akapicie. Jak widać w powyższym przykładzie nasz string to połączone ze sobą separatorem ':' elementy czasu, które utworzą zegar. Jeszcze zostało nam tylko wpisać wartość zmiennej timeString do tagu HTML i ustawić wywoływanie funkcji co jedną sekundę, czyli 1000 milisekund. Krok ostatni to dodanie naszej funkcji do metody addEventListener, aby była ona wywołana po załadowaniu się strony i mamy gotowy zegar.

Autor tego artykułu pokusił się o dodanie do naszego zegara opcji mrugania. Jeśli chcemy, aby nasz zegar mrugał w interwale jednosekundowym definiujemy na początku naszego skryptu (przed definicją funkcji showTime) zmienną i z wartością domyślną = 0. Następnie już w funkcji tworzymy następujący warunek:

n = n == 0 ? 1 : 0;

Jeszcze warunek, który będzie sterował mruganiem:

if(n == 1) p.style.display = 'block';

else p.style.display = 'none';

I gotowe! Od teraz nasz zegar będzie mrugał co sekundę. Pamiętaj, że czas pobierany przez obiekt Date, to aktualny czas na Twoim komputerze. W kolejnym artykule na temat obiektu Date zajmiemy się wyświetlaniem daty.