Ce ne așteptăm de la cronometrul jQuery? Astăzi vom crea un plugin jQuery pentru a afișa numărătoarea inversă. Acesta va afișa zilele, orele, minutele și secundele rămase, înainte ca evenimentul să înceapă. Să începem ...
Tot ce este necesar pentru a rula cronometrul este de a specifica ce div este cronometrul nostru. Vom seta pur și simplu blocul de numărare id. iar plugin-ul timer jQuery are grijă de următorul marcaj HTML.
În acest exemplu de cod, pluginul jquery va fi apelat și va funcționa cu div, al cărui id este numărătoarea inversă. Clasa numărătoare inversă este adăugată la acest element (va fi adăugată automat, conține câteva elemente de design folosind CSS).
În interior, există un marcaj pentru cifrele cronometrului. Există două elemente de spațiere pentru cifre pentru zile, ore, minute și secunde. Aceasta înseamnă că puteți contoriza timpul până la data care nu depășește 99 de zile în viitor. Folosiți continuu cronometrul nu va funcționa. Acest lucru nu este recomandabil și mai puțin impresionant.
Creați un fișier cu clase de stil pentru cronometru.
O clasă statică pentru numere le oferă un fundal gradient și o umbră pentru blocul numeric. Puteți da stilului dvs. un cronometru prin editarea unui fișier CSS.
Elementele span cu clasa .countDiv sunt delimitatorii între blocurile de numere. Această structură este formată folosind: înainte / după atribute.
Cum se formează acest markup?
Mai întâi, creați două funcții de ajutor utilizate de plugin:
init - generează marcajul pe care tocmai l-ați văzut.
switchDigit - primește opțiunile de afișare și animă cifrele din el.
Separarea acestor funcții de codul plugin vă permite să păstrați codul plugin-ului curat.
jquery.countdown.js - funcții de ajutor
Excelent! Acum scrieți baza pluginului. Pluginul nostru ar trebui să accepte un obiect cu parametri pentru o setare convenabilă - timpul la care se contorizează contorul, funcția de retur apelată, apelată în fiecare secundă, actualizează timpul.
Funcția căpușă. se produce în fiecare secundă. Astfel, putem lua în considerare diferența în timp. Funcția updateDuo actualizează cifrele.
jQuery cronometrul este gata! - să vedem cum poate fi folosit în cod.
Utilizând jQuery Timer
Desigur, trebuie să conectați fișierele CSS și JS timer la pagina dvs.
recurență ciclic
Pentru a face ciclicul temporizat, de exemplu, pentru a calcula timpul rămas până în ziua următoare, este suficient să modificați mai multe linii din cod. Fișierul scripts.php va arăta astfel:
Puteți utiliza scriptul ca un plus excelent pe fiecare pagină înaintea unui eveniment important. Cel mai bun lucru despre timer-ul jquery este că nu folosește imagini, totul funcționează pe codul CSS pur.
Articole similare
Trimiteți-le prietenilor: