Creați un ceas analogic folosind pânza
de IQAndreas | 26 februarie 2014
Astăzi, vom realiza un ceas analogic clasic folosind caracteristicile pânzei găsite în HTML5. Ceasul pe care îl veți crea va arăta după cum urmează:
Acest ceas este de fapt live! Ar trebui să afișeze ora curentă a sistemului și să se actualizeze pe măsură ce trece fiecare secundă. În acest tutorial, veți afla totul despre cum să faceți acest lucru. Să începem.
Notă foarte importantă
Ca parte a creării ceasului nostru, veți obține puncte bonus dacă ascultați muzică cu tematică adecvată!
Noțiuni de bază
Vom adăuga în mod incremental HTML, CSS și JavaScript pentru a crea în cele din urmă minunatul nostru ceas analogic. Să începem mai întâi cu HTML de bază. Creați un nou document HTML și adăugați următorul cod:
Dacă previzualizați ceea ce avem până acum, nu există prea multe de văzut. Să remediem parțial acest lucru adăugând următoarele CSS între etichetele de stil:
Și, în sfârșit, să adăugăm ceva JavaScript pentru ca totul să înceapă să se miște! Adăugați următorul cod în etichetele de script:
Previzualizați-vă pagina în acest moment. Dacă pagina dvs. nu arată ca următoarea imagine, verificați de două ori dacă ați încărcat corect JavaScript-ul:
Acum, că avem elementele de bază în funcțiune, este timpul să trecem la.
Realizarea unui ceas digital
Deci vrei să faci un ceas analogic? Mai încet acolo, prietene!
Mai întâi vom adăuga un ceas digital. Motivul este că acest lucru ne va ajuta să învățăm să folosim clasa Date - clasa care conține o mulțime de funcționalități pe care le vom folosi pentru a afișa ora corectă. În al doilea rând, începând cu un ceas digital, depanarea ceasului nostru analogic va fi mult mai ușoară (credeți-mă în acesta).
Obținerea unei întâlniri
Dacă doriți să obțineți ora curentă în JavaScript, modul în care faceți acest lucru este prin simpla apelare a datei noi (). Editați codul JavaScript existent în funcția displayTime adăugând următoarele două linii evidențiate:
Dacă vă previzualizați documentul acum, veți vedea data afișată:
Deși acesta nu este un ceas în sens digital sau analogic, cel puțin ne deplasăm într-o direcție care pare corectă. Cu toate acestea, data afișată este MULT mai multe informații decât avem de fapt nevoie. Va trebui să scriem propriul nostru cod pentru a afișa ora, mai degrabă decât să ne bazăm pe toString () pentru a-l forma corect.
Pentru a ne ajuta să simplificăm puțin datele, clasa Date vine cu mai multe metode. În acest moment, tot ce trebuie să ne facem griji sunt funcțiile de timp:
Deoarece toate aceste valori sunt numere, deși nu este întotdeauna necesară, ar trebui să le convertim cu String (num) înainte de a încerca să le afișăm:
Codul dvs. complet din funcția displayTime va arăta acum după cum urmează:
Dacă previzualizați ceea ce aveți acum, veți vedea ceva care arată după cum urmează:
Păi funcționează, dar arată cam "amuzant". Mai întâi (dacă ignorați ora), veți observa că apare un timp neobișnuit de 18: 54: 1. Majoritatea ceasurilor digitale adaugă zerouri suplimentare la minut și a doua parte pentru a se asigura că valoarea este de două cifre, deci ceea ce ar trebui să afișeze cu adevărat ceasul este 18:54:01 .
Să adăugăm o funcție numită padZero care adaugă un zero la începutul numărului, dacă este necesar:
Această funcție padZero ia un număr ca argument. Dacă numărul apare cu mai puțin de două cifre (de asemenea mai puțin de 10), adăugăm un zero la începutul numărului pentru a face să apară ca două cifre cu un 0 care alcătuiește prima cifră. Dacă numărul este deja de două cifre, nu facem nimic și îl strângem doar ca parte a returnării acestuia.
Să folosim această funcție în exemplul nostru. Înlocuiți linia variabilă timeString cu următoarea versiune modificată:
JavaScipt-ul nostru complet în acest moment va arăta astfel:
În acest moment, timpul dvs. se va afișa acum mai corect, fără să apară numere dintr-o singură cifră fără un 0 în fața lor. Există totuși un lucru care va părea ciudat.
Dar asta e timpul armatei!
Dacă sunteți o țară care nu folosește ceasul de 24 de ore (tuse, tuse, America), puteți fi confuz sau cel puțin deranjat de faptul că valoarea orei de pe ceasul nostru este mai mare de 12. Deși ceasul de 24 de ore este mai clar și mai puțin ambiguu, la fel de bine l-am putea converti într-un ceas de 12 ore doar pentru ca toată lumea de pe glob să îl poată înțelege.
Vom scrie o funcție care convertește ora la ora de 12 ore. În primul rând, vom folosi operatorul de modul pentru a ne asigura că ora este o valoare între 0 și 11. Dar din moment ce nu există 0 oră în ceasul de 12 ore, ne asigurăm că valoarea nu se afișează niciodată schimbând-o în 12 in schimb.
Pentru a face acest lucru, îndepliniți funcția formatHour:
De asemenea, mai avem nevoie de o modalitate de a spune dacă să folosim AM sau PM. Modul în care este configurat este un pic dificil (comanda este 11 AM, 12 PM, 1 PM, când într-adevăr, ar avea mai mult sens să apelăm acel 12 AM). Ați putea scrie o funcție care face acest lucru cu atenție, dar vom lua o comandă rapidă care poate să nu fie foarte clară. dar funcționează:
După ce ați adăugat funcțiile formatHour și getTimePeriod în codul dvs., continuați și modificați variabila timeString din displayTime din nou cu următoarele:
Dacă vă previzualizați pagina din nou, acum veți vedea timpul afișat după cum urmează:
Tadaaa! Acum aveți un ceas digital. Nu se actualizează în fiecare secundă, dar este OK pentru moment. Vom aborda acest detaliu ca parte a creării ceasului nostru analog în curând.
Desenarea ceasului analogic
Aici începe distracția! Vă amintiți acel element care ne-a așteptat atât de răbdător? Este un pic dificil de văzut unde se află pe pagină, așa că hai să „aducem înainte” mutând conturul nostru de la ceasul digital la pânza noastră.
În CSS, asigurați-vă că linia evidențiată apare în regula stilului #clock spre deosebire de regula # stilului de timp curent:
Dacă vă previzualizați pagina, veți vedea acum pânza conturată spre deosebire de timpul în sine:
Testarea pânzei
Să ne asigurăm că pânza noastră funcționează corect trasând câteva linii pe ea. Va fi la îndemână să lăsați ceasul digital acolo (astfel putem vedea ora curentă deasupra ceasului nostru analogic), așa că lăsați vechiul JavaScript în funcția displayTime acolo unde este și adăugați codul pentru ceasul analogic imediat după el.
Mai întâi vom face o linie roșie din centrul ceasului spre dreapta (ora 3). Adăugați următoarele linii evidențiate la funcția displayTime: