»Korisnik: »Password:   Zapamtime? 
Forum HOME / WEB PROGRAMIRANJE / JavaScript i AJAX / Casovnik na stranici
Objavljeno:  09 Feb 2010 09:44   Zadnji put editovao: izuzetan

Administrator
Trenutno offline 		Postovi:  15
Učlanjen: Feb 2010
Najpre ću dati kompletnu skriptu a posle toga sledi komentar:
Code:

<html><head>
<title>Naslov stranice neki</title>
<script type="text/javascript">
function casovnik(){
   vreme = new Date();
   cas = vreme.getHours();
   minuti = vreme.getMinutes();
   sekunde = vreme.getSeconds();
   minuti=(minuti < 10 ? "0" : "") + minuti;
   sekunde = (sekunde < 10 ? "0" : "") + sekunde;
   vremeDana = (cas < 12 ) ? "AM" : "PM";
   cas = (cas > 12) ? cas - 12 : cas;
   cas = (cas == 0) ? 12 : cas;
   vremeString = cas + ":" + minuti + ":" + sekunde + " " + vremeDana;
   document.getElementById("clock").innerHTML = vremeString;
}
</script>
</head><body onload="casovnik(); setInterval('casovnik()', 1000)">
<span id="clock">&nbsp;</span>
</body></html>


JavaScript omogućava manipulacijom sadržaj web-stranice u realnom vremenu.
To znači da možemo koristiti JavaScript za stvaranje digitalnog sata, i umetuti ga gde god nam je volja u web-stranicu.

Ako želimo stvoriti sat onda očito trebamo dohvatiti trenutno vreme. Možemo to učiniti putem JavaScript Date klase.
Prvo, napravimo Date objekat bez parametara, koji nam daje Date objekt koji sadrži trenutni datum i vreme iyvučenog sa računara posetioca:
Code:

vreme = new Date();
Zatim izvlačimo sate, minute i sekunde trenutnog vremena iz našeg objekta vreme:
Code:

cas = vreme.getHours();
minuti = vreme.getMinutes();
sekunde = vreme.getSeconds();
Sada kada imamo tri komponente trenutnog vremena trebamo sve to formatirati i prikazati smisleno na web-stranici.
Na primer želimo da bude u formatu "HH: MM: SS XX", gde je XX ili "AM" ili "PM" u zavisnosti od doba dana.

Prvo ćemo dodati nule za vrednosti minute i sekunde kad je potrebno:
Code:

minuti=(minuti < 10 ? "0" : "") + minuti;
sekunde = (sekunde < 10 ? "0" : "") + sekunde;
E sad možemo definisati kad da se pojavi AM a kad PM simbol na satu za doba dana, i ujedno napravimo string kako bi izgledao sat:
Code:

vremeDana = (cas < 12 ) ? "AM" : "PM";
cas = (cas > 12) ? cas - 12 : cas;
cas = (cas == 0) ? 12 : cas;
vremeString = cas + ":" + minuti + ":" + sekunde + " " + vremeDana;
Sada kad imamo definisan kompletan string za vreme potrebno ga je prikazati na web-stranici. Za tu svrhu mi će mo upotrebiti SPAN HTML tag jer je pogotan zato što ga možemo umetnuti gde god želimo unutar web-stranice.
Code:


<span id="clock">&nbsp;</span>
A element ID se pravi na sledeći način:
Code:

document.getElementById("clock").innerHTML = vremeString;
Da bi se prikaz menjao svake sekunde koristićemo setInterval() funkciju na sledeći način:
Code:

<body onload="casovnik(); setInterval('casovnik()', 1000)">


Ovo bi bio glavni kostur bilo kog časovnika. U nastavku možemo pomoću CSS ili JavaScript-a doterivati izgled sata a takodje možemo manjati i sam string prikaza kako nam je volja.