- Setați data corectă a capătului
- Se calculează timpul rămas
- Adu-o dată la o dimensiune convenabilă
- Print timer-ul de date ca obiect reutilizabile
- Afișează ceasul pe pagină și le opri atunci când ajung la sol
Setați data corectă a capătului
În primul rând, trebuie să setați data corectă la sfârșitul anului. Acesta va fi un șir de caractere în oricare dintre formatele pe care le înțelege Date.parse metoda (). De exemplu:
Sau format lung
Fiecare dintre aceste formate vă permite să setați ora exactă (ore, minute, secunde) și fusul orar. De exemplu:
Se calculează timpul rămas
Următorul pas - pentru a calcula timpul rămas. Pentru a face acest lucru, avem nevoie pentru a scrie o funcție care va lua linia cu timpul de terminare și să ia în considerare diferența dintre acest moment și curent. Iată cum arată:
Funcția getTimeRemaining (ENDTIME) var t = Date.parse (ENDTIME) - Date.parse (new Date ());
var secunde = Math.floor ((t / 1000)% 60);
minute var = Math.floor ((t / 1000-1060) 60%);
ore var = Math.floor ((t / (1000 * 60 * 60))% 24);
zile var = Math.floor (t / (1000 * 60 * 60 * 24));
întoarcere # '# Total': t,
# '# Zile': zile,
# '# Ore': ore,
# '# minute': minute,
# '# Secunde': secunde
>;
>
var t = Date.parse (ENDTIME) - Date.parse (new Date ());
Adu-o dată la o dimensiune convenabilă
Acum vrem să converti la milisecunde zile, ore, minute și secunde. Să folosim ca un exemplu de un al doilea:
var secunde = Math.floor ((t / 1000)% 60);
Vedem ce se întâmplă aici.
- Împărțiți milisecunde de 1000 pentru a le converti în al doilea
- Se împarte numărul total de 60 de secunde și de a salva restul - nu aveți nevoie de toate de-al doilea, numai cei care au rămas în urma procesului-verbal au fost numărate
- Rotunjește la cea mai apropiată valoare întreagă, pentru că aveți nevoie pentru a finaliza un al doilea, nu fracțiunile acestora
Se repetă această logică pentru a converti milisecunde la minute, ore și zile.
Print timer-ul de date ca obiect reutilizabile
Când orele, minutele și secundele sunt gata, trebuie să le întoarcă ca obiect reutilizabile.
întoarcere # '# Total': t,
# '# Zile': zile,
# '# Ore': ore,
# '# minute': minute,
# '# Secunde': secunde
>;
Acest obiect vă permite să apelați funcția și au oricare dintre valorile calculate. Iată un exemplu despre cum puteți obține minutele rămase:
Afișează ceasul pe pagină și le opri atunci când ajung la sol
Acum avem o functie care ne întoarce la restul de zile, ore, minute și secunde. Putem construi cronometrul nostru. În primul rând, creați următoarea structură de ore HTML:
Apoi a scrie o funcție care va afișa datele din interiorul div # „ca:
ceas funcția initializeClock (id, ENDTIME) var = document.getElementById (id);
var TimeInterval = setInterval (funcția () var t = getTimeRemaining (ENDTIME);
clock.innerHTML = Zile #“: # „+ T.days + # "
# „+
Ore #“: # „+ T.hours + # "
# „+
# „Minute: # „+ T.minutes + # "
# „+
Secunde #“: # „+ T.seconds;
în cazul în care (t.total
Această funcție are doi parametri: ID-ul element care va ține ore noastre, iar timpul final count. In interiorul functiei, vom declara ceasul variabila si va folosi pentru a păstra o referință la unitatea noastră cu un ceas, astfel încât să nu avem nevoie de a solicita o DOM.
Vom continua să utilizeze setInterval. pentru a rula o funcție anonimă în fiecare secundă, ceea ce va face următoarele:
- Se calculează timpul rămas
- Afișează timpul rămas în div
- Dacă timpul rămas = 0, stop ceas
Singurul lucru care a mai rămas pentru a porni ceasul, după cum urmează:
Pregătiți-ceas pentru a afișa
Înainte de styling, vom avea nevoie pentru a îmbunătăți ușor unele lucruri.
- Scoateți temporizatorul inițial de întârziere pentru a arăta imediat
- Asigurați-un script de ore mai eficiente, astfel încât să nu trebuie să reconstruiască în mod continuu toate orele
- Adăugați zerouri dacă se dorește
Eliminați întârzierea inițială
În orele folosim setInterval. pentru a actualiza ecranul în fiecare secundă. Cel mai adesea, acest lucru este normal, cu excepția început, în cazul în care există o întârziere 1s. Pentru a remedia acest lucru, trebuie să actualizăm ceasul o dată înainte de expirarea setInterval.
Pentru a face acest lucru, să trecem funcția anonimă pe care le trece în setInterval (cel care actualizează ceasul în fiecare secundă) în propria sa funcție separată, pe care o numim updateClock. Apelează această funcție o dată în afara setInterval și apoi suna-l din nou în interiorul setInterval. Astfel, ceasul va fi afișat fără întârziere.
var TimeInterval = setInterval (funcția (), 1000);
Funcția updateClock () var t = getTimeRemaining (ENDTIME);
clock.innerHTML = Zile #“: # „+ T.days + # "
# „+
Ore #“: # „+ T.hours + # "
# „+
# „Minute: # „+ T.minutes + # "
# „+
Secunde #“: # „+ T.seconds;
în cazul în care (t.total
Facem script-ul mai eficient
Pentru a face script-ul mai eficient, trebuie să actualizăm, nu toate oră, și doar numere. Pentru a face acest lucru, a pus fiecare număr într-un interval de etichetă și va actualiza numai conținutul.
zile:
ore:
Minute:
secunde:
Acum, să ne facă referire la aceste elemente. Adăugați următorul cod direct după definiția ceasului variabile.
var daysSpan = clock.querySelector (# '# zile.');
var hoursSpan = clock.querySelector (# 'ore #.');
var minutesSpan = clock.querySelector (# '# minute.');
var secondsSpan = clock.querySelector (# '# secunde.');
Apoi, avem nevoie pentru a schimba updateClock funcția. pentru a actualiza numai numerele, nu toate ore. Noul cod ar arăta astfel:
Funcția updateClock () var t = getTimeRemaining (ENDTIME);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;
Adăugarea de zerouri la început
Dacă aveți nevoie de zerouri veduyuschie, puteți înlocui codul de genul:
secondsSpan.innerHTML = (# '# 0' + t.seconds) .slice (-2);
concluzie
Recomanda acest articol unui prieten:
Daca ti-a placut site-ul, link-ul pentru a-l (pe site-ul dvs., pe forum, în contact)
Se pare ca acest lucru: