Nume Tutorial:Ceas in Javascript
Descriere:Ceas in Javascript
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial): Propria parere:Util.
Tutorialul:
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
Pentru a utiliza functiile metoda ale obiectului ‘Date’, trebuie să cream ceea ce se numeşte o instanta a obiectului ‘Date’. Ne gandim la o instanta a obiectului ‘Date’ ca la o variabilă sau substituent care ne permite accesul la funcţiile de membru de la obiectul ‘Date’. Pentru a crea o instanta a obiectului ‘Date’, o definim ca o noua variabila:
Spre deosebire de functii, care sunt valabile global, o metoda apartine unui obiect. Clasa obiectului defineste ce metode si ce proprietati are obiectul.
Comanda data mai sus ne permite sa folosim variabila ‘data’ ca sa accesam metodele obiectului ‘Date’. Pentru a intelege mai bine ce reprezinta metodele unui obiect, aveti mai jos cateva exemple de metode ale obiectului ‘Date’:
Metoda
Ce face aceasta
getHours() Returneaza numarul curent de ore dintr-o zi: (0-23)
getMinutes() Returneaza numarul curent de minute din ora: (0-59)
getSeconds() Returneaza numarul curent de secunde din minut: (0-59)
getDay() Returneaza numarul de zile din saptamana: (0-6)
getMonth() Returneaza numarul de luni din an: (0-11)
getYear() Returneza numarul de ani dintr-un secol: (0-99)
De exemplu pentru a extrage numarul de minute din ora vom proceda astfel:

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:

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:

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:

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ă:

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.