Ceas in Javascript

In continuare vom crea un ceas, care isi face refresh singur in pagina, utilizand obiectul ‘Date’ si unele dintre metodele sale.

Vei invata cum iti poti crea propriul ceas in javascript, personalizat dupa nevoile tale.

În cazul în care ne dorim sa cream un ceas, atunci în mod evident, avem nevoie de a prelua ora curentă. Putem face acest lucru prin intermediul clasei Date din JavaScript.

Preluarea orei curente

var data=new Date();

De exemplu pentru a extrage numarul de minute din ora vom proceda astfel:

var data=new Date(); // cream variabila 'data' ca o instanta a obiectului Date
var minute=data.getMinutes(); //variabila 'minute' va contine numarul de minute din ora


Unul din avantajele folosirii obiectelor este acela ca poate contine mai multe valori, fata de o variabila care poate avea una singura in acelasi timp. In continuare putem lua si celelalte valori care ne sunt necesare pentru a crea un ceas:

var data=new Date();
var ora=data.getHours();
var minute=data.getMinutes();
var secunde=data.getSeconds();

Formatarea orei

Acum, că avem cele trei componente cu valorile noastre curente de timp, sa formatam  într-un şir frumos pentru afişarea lor în pagina Web. Ne dorim ca acesta să fie în formatul “HH: MM: SS XX”, unde XX este fie “AM” sau “PM”.
În primul rând, vom adăuga un zero la valoarea minutelor şi secundelor, dacă este cazul:

minute= ( minute < 10 ? "0" : "" ) + minute;
secunde= ( secunde < 10 ? "0" : "" ) + secunde;


Simbolurile utilizate mai sus (? şi 🙂 insumeaza operatorul ternar. Acesta este un operator special care returneaza valoarea dinaintea “:” daca conditia pusa inainte de “?” este adevarata sau returneaza valoarea dupa “:” daca conditia este falsa. Este un mod exceptional de a scrie un bloc conditional “if” pe scurt daca vreti sa returnati o singura valoare.

Apoi, vom crea o variabilă, “timpulZilei”, pentru “AM” sau “PM”, aşa cum este cazul. Am dori de asemenea, sa arătam ora 12 decât 0, deci avem nevoie de a adăuga un control pentru asta:

var timpulZilei= ( ora < 12 ) ? "AM" : "PM";
ora= ( ora > 12 ) ? ora - 12 : ora;
ora= ( ora == 0 ) ? 12 : ora;

In continuare vom pune toate componentele ceasului intr-un sir avand formatul “HH:MM:SS XX”:

var sirData= ora + ":" + minute + ":" + secunde + " " + timpulZilei;

Afisarea ceasului

Acum, că avem sirul care contine timpul nostru gata pentru a fi afişate, următorul pas este acela de a-l afişa în pagina Web. Pentru a face acest lucru, mai întâi vom crea un recipient span care sa afiseze ceasul:

 ;

Prin plasarea   în interiorul elementului span, vom crea un nod copil text. Atunci, vom putea popula containerul cu ceasul nostru, preluand nodul copil text apoi stabilind proprietatea nodeValue , după cum urmează:

document.getElementById("ceas").firstChild.nodeValue= sirData;


Punem totul impreauna

Iată codul nostru JavaScript terminat, gata de a fi afisat in pagina Web. Am pus toate cele de mai sus într-o funcţie , updateazaCeas().
Pentru a face ca ceasul sa se updateze automat, trebuie sa folosim metoda Window.setInterval() in tag-ul body pentru a face apel la functia updateazaCeas() in fiecare secunda. Trebuie, de asemenea, sa apelam functia updateClock () în momentul în care pagina se incarca, astfel încât ceasul sa apara imediat:



Punand toate cap la cap vom aveam o pagina web care va arata in felul urmator:








 



Copiati tot codul de mai sus, il puneti intr-un fiser .html si o sa obtineti pe pagina voastra web un ceas care se actualizeaza automat.

Aveti aici un exemplu cu el in actiune. Sper ca v-a fost de ajutor.