Idõzítés 18 sor javascript kódot
- Állítsa be a dátumot a végén
- Számoljuk ki a hátralévő időt
- Hozz egy időpontra, hogy a megfelelő méretű
- Az adatok nyomtatásához időzítő újrafelhasználható tárgy
- Az óra megjelenítése az oldalon, és megállítani őket, amikor elérik a talajt
Állítsa be a dátumot a végén
Először is, meg kell állítani a helyes dátum a végén. Ez lesz egy string bármely formátumot, amely megérti Date.parse () metódust. Például:
Vagy hosszú formátumban
Mindegyik formátum lehetővé teszi, hogy a pontos időt (óra, perc, másodperc), és az időzónát. Például:
Számoljuk ki a hátralévő időt
A következő lépés - kiszámítani a hátralévő időt. Ehhez meg kell írni egy függvényt, amely elviszi a vonalat az felmondásakor és vizsgálni a különbség az idő és a jelenlegi. Itt van, hogyan néz ki:
funkció getTimeRemaining (Befejezési) var t = Date.parse (Befejezési) - Date.parse (new Date ());
var másodperc = Math.floor ((t / 1000)% 60);
var perc = Math.floor ((t / 1000-1060) 60%);
var óra = Math.floor ((t / (1000 * 60 * 60))% 24);
var nap = Math.floor (t / (1000 * 60 * 60 * 24));
visszatérés # 'Total #': t,
# Napok # ': nap,
# 'Óra #': óra,
# „Jegyzőkönyvet #”: perc:
# 'Seconds #': másodperc
>;
>
var t = Date.parse (Befejezési) - Date.parse (new Date ());
Hozz egy időpontra, hogy a megfelelő méretű
Most szeretnénk átalakítani milliszekundum nap, óra, perc, másodperc. Nézzünk példaként egy második:
var másodperc = Math.floor ((t / 1000)% 60);
Látjuk, hogy mi folyik itt.
- Osszuk milliszekundum 1000 átalakítani őket a második
- Osszuk el a teljes száma 60 másodperc, és mentse a többi - nem kell minden második, csak azokat, amelyek után visszamaradt perc megszámoltuk
- Lefelé kell kerekíteni a legközelebbi egész számot, mert el kell végeznie egy második, nem ezek frakciói
Ismételjük meg ezt a logikát átalakítani milliszekundum percek, órák és napok.
Az adatok nyomtatásához időzítő újrafelhasználható tárgy
Amikor az óra, perc, másodperc készen állnak, vissza kell térnünk őket egy újrafelhasználható objektumot.
visszatérés # 'Total #': t,
# Napok # ': nap,
# 'Óra #': óra,
# „Jegyzőkönyvet #”: perc:
# 'Seconds #': másodperc
>;
Ez az objektum lehetővé teszi, hogy hívja a funkciót, és bármilyen, a számított értékeket. Íme egy példa arra, hogyan lehet kapni a fennmaradó perc:
Az óra megjelenítése az oldalon, és megállítani őket, amikor elérik a talajt
Most van egy függvény, amely visszaadja nekünk a maradék nap, óra, perc, másodperc. Tudjuk építeni a stoppert. Először is, hozza létre a következő struktúrát html órán:
Akkor írj egy függvényt, amely megjeleníti az adatokat belül a div # „, mint:
funkció initializeClock (id, Befejezési) var órajel = document.getElementById (id);
var timeinterval = setInterval (function () var t = getTimeRemaining (Befejezési);
clock.innerHTML = # Napok: # „+ T.days + # '
# „+
# „Tartás: # „+ T.hours + # '
# „+
# „Perc: # „+ T.minutes + # '
# „+
# „Másodperc: # „+ T.seconds;
if (t.total
Ez a függvény két paramétert: id elem, hogy tart a óra, és a végső szám időt. Bent a funkció, akkor állapítsa meg a változó órát és ezt meg is teszi, hogy egy hivatkozás a készüléket egy órát, úgy, hogy nem kell kérni a DOM.
Mi továbbra is használni setInterval. futtatni egy névtelen függvényt másodpercenként, ami a következő fog történni:
- A hátralévő idő kiszámítása
- Itt található a hátralévő idő a mi div
- Ha a fennmaradó idő = 0, stopper
Az egyetlen dolog, ami maradt az óra elindításához az alábbiak szerint:
Készítsük el az óra megjelenítésére
Mielőtt stílus, akkor kell némileg javítani néhány dolgot.
- Távolítsuk el a kezdeti késleltetés időzítő azonnal megjelenjen
- Készítsen script órák hatékonyabb, hogy ne kelljen folyamatosan újra minden órában
- Add nullák kívánt
Távolítsuk el a kezdeti késleltetés
Az órát használjuk setInterval. frissíteni a kijelző másodpercenként. Leggyakrabban ez normális, kivéve az elején, ahol van egy 1s késleltetés. A probléma kiküszöbölése érdekében meg kell frissíteni az órát egyszer már setInterval fut.
Ehhez menjünk a névtelen függvényt, hogy átadjuk a setInterval (az egyik, hogy frissíti az órát minden második) saját külön funkció, amit úgy hívunk updateClock. Hívja ezt a funkciót, ha külső setInterval majd hívja fel ismét benn setInterval. Így az óra lesz látható késedelem nélkül.
var timeinterval = setInterval (függvény (), 1000);
funkció updateClock () var t = getTimeRemaining (Befejezési);
clock.innerHTML = # Napok: # „+ T.days + # '
# „+
# „Tartás: # „+ T.hours + # '
# „+
# „Perc: # „+ T.minutes + # '
# „+
# „Másodperc: # „+ T.seconds;
if (t.total
Azt, hogy a forgatókönyvet hatékonyabb
Ahhoz, hogy a script hatékonyabb, meg kell frissíteni, nem minden óra, és csak számokat. Ehhez tegye az egyes szám egy span tag, és csak akkor frissíti a tartalmat.
Napok:
Óra:
Perc:
másodperc:
Most tegyük hivatkozva ezeket az elemeket. Adjuk hozzá a következő kódot után közvetlenül a változó definíciójában óra.
var daysSpan = clock.querySelector (# 'nap #.');
var hoursSpan = clock.querySelector (# 'órán #.');
var minutesSpan = clock.querySelector (# 'perc #.');
var secondsSpan = clock.querySelector (# 'másodperc #.');
Akkor meg kell változtatni a funkciót updateClock. frissíteni csak a számok nem minden órát. Az új kód a következőképpen néz ki:
funkció updateClock () var t = getTimeRemaining (Befejezési);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;
Hozzáadása vezető nullák
Ha szüksége van veduyuschie nullák, akkor cserélje ki a kódot, mint ez:
secondsSpan.innerHTML = (# '0 #' + t.seconds) .slice (-2);
következtetés
Ajánlom ezt a cikket egy ismerősének:
Ha tetszett az oldal, a link meg (az oldalon, a fórum, a kapcsolatot)
Úgy néz ki, mint ez: