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:

var data=new Date();

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:

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:




testscript | Ceas in Javascript



 



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.

2 Comments
  1. alex 6 years ago

    multumesc mult am reusit sa imi fac un ceas pt siteul meu

  2. sake 4 years ago

    Super tare frate!
    Multumim!

Leave a reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

©2019 KLEO Template a premium and multipurpose theme from Seventh Queen

Log in with your credentials

Forgot your details?