Kezdőlap Idő megjelenítése weblapon
Bejegyzés
Mégse

Idő megjelenítése weblapon

Javascripttel a weblapunkon könnyedén megjeleníthetünk egy dinamikusan frissülő órát, dátummal. A következő pár sorban bemutatom, hogy hogyan kell.

Először helyezzünk el a HTML oldalunkon egy elemet, ahol az időt akarjuk megjeleníteni.

1
<div id="time"></div>

Kell egy segítő függvény, amivel a 10 alatti számokhoz hozzábiggyeszt egy 0-át. pl: e helyett: 2019.1.1. / 1:1:1: helyett 2019.01.01. / 01.01:01 lesz.

1
2
3
4
5
6
function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Létrehozunk egy függvényt, ami majd lekérdezi a jelenlegi dátumot.

A jelenlegi dátumot eltároljuk a now változóban.

1
2
function updateClock() {
    var now = new Date();

Egy új változóban a now időegységeit lekérdezzük, majd kettősponttal elválasztva eltároljuk.

1
var time = addZero(now.getHours()) + ':' + addZero(now.getMinutes()) + ":" + addZero(now.getSeconds());

Ugyanígy a dátummal. A hónapnál egyet hozzáadunk, mert 0-val kezdődik a számolás.

1
var date = addZero(now.getUTCFullYear()) + '.' + (addZero(now.getUTCMonth() + 1)) + "." + addZero(now.getUTCDate());

Megjelenítjük a HTML elemben, és összefűzzük a dátumot és az időt.

1
document.getElementById('time').innerHTML = [date, time].join(' / ');}

Ismételjük meg az elkészült függvényt 1 másodpercenként (1000 miliszekundum).

1
setInterval(updateClock, 1000);

Később a HTML-ben vagy a Javascript fájlban meghívható az updateClock() függvény.

A teljes kódsor az eredménnyel:

A bejegyzés CC BY 4.0 licenccel rendelkezik.

Üdvözöllek!

Wordpress gyerek téma létrehozása