KategorieProgramowanieWeb Developer

[JavaScript] W jaki sposób umieścić na stronie zegar podający aktualną godzinę ?

Java Script daje nam bardzo duże możliwości jeśli chodzi o wszelkie dynamiczne elementy na stronie. Takim fajnym bajerem właśnie będzie zegar pokazujący aktualną godzinę w miejscu przez nas wskazanym.

Zanim przejdziemy do pisania skryptu w Java Script musimy gdzieś na stronie umieścić element do którego nasz skrypt będzie wpisywał aktualny czas. Tak więc w miejscu w którym ma się pojawić zegar umieszczamy poniższy kod.

<div id="czas"></div>

Jest to pusty element div o identyfikatorze “czas”, dzięki identyfikatorowi będziemy w stanie zlokalizować ten element w strukturze drzewa DOM.

Mając już przygotowane miejsce musimy zając się kodem, który będzie wpisywał aktualny czas do naszego elementu. Do tego celu posłużymy się obiektem “Date”

var data = new Date()

Obiekt ten posiada wiele przydatnych metod których opis znajdziecie tutaj.

Kiedy byłem młody 😉 i nie do końca świadomy wielu możliwości jakie daje JS napisałem taką funkcję:


function getTime() 
{
    var data = new Date();
    var god = data.getHours();
    var min = data.getMinutes();
    var sek = data.getSeconds();

    return ""+god+
             ((min<10)?":0":":")+min+
             ((sek<10)?":0":":")+sek;
}

Oczywiście spełnia swoje zadanie i zwraca czas w dokładnie takim formacie jaki chciałem (działający kod możecie zobaczyć tutaj) jednak jest tu sporo zbędnego kodu. A w przypadku JS (podobnie jak w innych językach skryptowych) ilość kodu ma znaczenie, gdyż przekłada się na wydajność naszych rozwiązań.

Po bliższym zapoznaniu z listą dostępnych metod zauważymy że mamy metodę toLocaleTimeString(), która zwraca aktualny czas w naszym lokalnym formacie. Tak więc dokonamy stosownej modyfikacji:

function getTime() 
{
    var data = new Date();

    return data.toLocaleTimeString();
}

Nasz kod diametralnie się skrócił dzięki temu, że nie musimy pobierać każdego elementu z osobna i łączyć go wykorzystując instrukcje warunkowe. Możemy jednak pójść jeszcze o krok dalej i cały kod zamknąć w jednej linijce 🙂

function getTime() 
{
    return (new Date()).toLocaleTimeString();
}

Teraz pozostaje tylko tak pobrany czas wpisać do elementu HTML na stronie. Do tego celu posłużymy się metodą getElementById() obiektu “document”;

document.getElementById('czas');

Aby wpisać jakąś wartość do tak pobranego elementu należy odwołać się do atrybutu “innerHTML”

document.getElementById('czas').innerHTML = "porady-it.pl";

Łącząc te dwa rozwiązania możemy spisać aktualną godzinę do elementu na stronie.

function getTime() 
{
    return (new Date()).toLocaleTimeString();
}

document.getElementById('czas').innerHTML = getTime();

Jedyny problem jaki pozostał to odświeżanie czasu co sekundę. Tutaj z pomocą nam przychodzi funkcja setInterval(), która wykonuję daną funkcję co określony czas. Jako pierwszy argument przyjmuje funkcję którą ma wykonać, zaś drugi argument to co jaki czas ma być wykonywana funkcja.

setInterval(function() {

    document.getElementById('czas').innerHTML = getTime();
    
}, 1000);

Powyżej mamy jako pierwszy argument przekazaną funkcję anonimową, w której ciele widzimy nasz kod pobrania czasu i przypisania go do elementu HTML. Drugi parametr czasu został ustawiony na “1000” co odpowiada jednej sekundzie, gdyż czas jest podawany w milisekundach.

Końcowa wersja naszego kodu będzie wyglądała następująco

<div id="czas"></div>

<script type="text/javascript">
function getTime() 
{
    return (new Date()).toLocaleTimeString();
}

//wywołanie ma na celu eliminację opóźnienia sekundowego
document.getElementById('czas').innerHTML = getTime();

setInterval(function() {

    document.getElementById('czas').innerHTML = getTime();
    
}, 1000);
</script>

A tutaj możecie zobaczyć działające DEMO.

PS.
Dla fanów jQuery, kod można zmodyfikować do postaci:

<div id="czas"></div>

<script type="text/javascript">
function getTime() 
{
    return (new Date()).toLocaleTimeString();
}

//wywołanie ma na celu eliminację opóźnienia sekundowego
$('#czas').html(getTime());

setInterval(function() {

    $('#czas').html(getTime());
    
}, 1000);
</script>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *