Hozzon létre egy analóg órát a vászon segítségével

írta: IQAndreas | 2014. február 26

Ma klasszikus analóg órát fogunk készíteni a HTML5 vászon funkcióinak felhasználásával. A létrehozni kívánt óra a következőképpen fog kinézni:

Ez az óra valóban él! Meg kell jelenítenie az aktuális rendszeridőt és frissítenie kell, amikor minden másodperc elhalad. Ebben az oktatóanyagban mindent megtudhat ennek elkészítéséről. Lássunk neki.

Nagyon fontos megjegyzés

Óránk létrehozásának részeként bónuszpontokat kap, ha bármilyen megfelelő témájú zenét hallgat!

Elkezdeni

Fokozatosan hozzáadjuk a HTML-t, a CSS-t és a JavaScript-et, hogy végül létrehozzuk a fantasztikus analóg óránkat. Kezdjük először az alapvető HTML-lel. Hozzon létre egy új HTML-dokumentumot, és adja hozzá a következő kódot:

Ha áttekinti az eddigieket, akkor nincs sok látnivaló. Javítsuk ki részben ezt a következő CSS hozzáadásával a stíluscímkék közé:

És végül tegyünk hozzá néhány JavaScript-et, hogy mindez mozogni kezdjen! Adja hozzá a következő kódot a szkriptcímkékbe:

Az oldal előnézete ezen a ponton. Ha az oldal nem úgy néz ki, mint a következő kép, ellenőrizze még egyszer, hogy megfelelően töltötte-e be a JavaScript-et:

Most, hogy elkészültünk az alapokkal, itt az ideje továbblépni.

Digitális óra készítése

Tehát szeretne egy analóg órát készíteni? Lassan ott, haver!

Először hozzá fogunk adni egy digitális órát. Ennek az az oka, hogy ez segít megtanulni a Date osztály használatát - ez az osztály sok olyan funkciót tartalmaz, amelyet a pontos idő megjelenítéséhez fogunk használni. Másodszor, a digitális órával kezdve sokkal könnyebbé válik az analóg óránk hibakeresése (bízzon ebben).

Dátum megszerzése

Ha meg akarja kapni az aktuális időt JavaScript-ben, akkor ezt egyszerűen az új Date () meghívásával végezheti el. Szerkessze a meglévő JavaScript kódot a displayTime függvényen belül a következő két kiemelt sor hozzáadásával:

Ha most előnézeti a dokumentumot, akkor megjelenik a dátum:

Bár ez sem digitális, sem analóg értelemben nem óra, legalábbis helyesnek tűnő irányba haladunk. Ezzel együtt a feltüntetett dátum az NAGYON több információ, mint amire valójában szükségünk van. Saját kódot kell írnunk az idő megjelenítéséhez, ahelyett, hogy a toString () -re támaszkodnánk a helyes formázáshoz.

Annak érdekében, hogy az adatokat egy kicsit leegyszerűsítsük, a Date osztály számos módszerrel rendelkezik. Most csak az időfüggvények miatt kell aggódnunk:

Mivel ezek az értékek számok, bár nem feltétlenül szükségesek, a String (num) karakterrel konvertálnunk kell őket, mielőtt megpróbálnánk megjeleníteni őket:

A displayTime függvény teljes kódja most a következőképpen fog kinézni:

Ha előnézeti a most birtokoltakat, látni fog valamit, amely a következőképpen néz ki:

Nos, működik, de kissé "viccesnek" tűnik. Először (ha figyelmen kívül hagyja az órarészt) észreveszi, hogy szokatlan 18: 54: 1 idő jelenik meg. A legtöbb digitális óra extra nullákat ad a perchez és a második részhez annak érdekében, hogy az érték két számjegy legyen, tehát az óra valójában 18:54:01 .

Adjunk hozzá egy nevű függvényt padZero amely szükség esetén nulla értéket ad a szám elejéhez:

Ez a padZero függvény argumentumként egy számot vesz fel. Ha a szám két számjeggyel kevesebb (más néven 10-nél kevesebb) jelenik meg, akkor hozzáadunk egy nullát a szám elejéhez, hogy két számjegyként jelenjen meg, az első számjegy 0-val. Ha a szám már kétjegyű, akkor nem teszünk semmit, és csak a visszaküldés részeként szigorítjuk.

Használjuk ezt a függvényt a példánkban. Cserélje ki a timeString változó sort a következő módosított verzióval:

A teljes JavaScipt ezen a ponton így fog kinézni:

Ezen a ponton az Ön ideje mostantól megfelelőbben jelenik meg, egyetlen egyjegyű szám nem jelenik meg előttük 0 nélkül. Van egy dolog, ami furcsának tűnik.

De ez a hadsereg ideje!

Ha olyan ország vagy, amely nem használja a 24 órás órát (köhögés, köhögés, Amerika), akkor megzavarhatja vagy legalábbis bosszanthatja az a tény, hogy az óránk értéke nagyobb, mint 12. Bár a 24 órás óra világosabb és kevésbé egyértelmű, akár 12 órás órává is alakíthatjuk, hogy mindenki a világon megértse.

Írunk egy függvényt, amely az órát 12 órás idővé konvertálja. Először a modulus operátort fogjuk használni, hogy megbizonyosodjunk arról, hogy az óra értéke között van-e 0 és 11.. De mivel nincs 0 órában a 12 órás órában ellenőrizzük, hogy ez az érték soha nem jelenik-e meg 12. helyette.

Ehhez teljesítse a formatHour funkciót:

Továbbá szükségünk van egy módra annak megmondására, hogy használjuk-e az AM vagy a PM órákat. Felállításának módja kissé trükkös (a sorrend 11:00, 12:00, 13:00, amikor valóban, ésszerűbb lenne ezt 12:00 -nak hívni). Írhatna egy függvényt, amely ezt alaposan elvégzi, de megadunk egy parancsikont, amely nem biztos, hogy egyértelmű. de működik:

Miután hozzáadta a formatHour és getTimePeriod függvényeket a kódjához, folytassa és módosítsa ismét a timeString változót a displayTime belsejében az alábbiakkal:

Ha újra előnézeti oldalát, akkor az alábbiak szerint jelenik meg az ideje:

Tadaaa! Most van egy digitális órád. Nem frissül minden másodpercben, de ez egyelőre rendben van. Rövidesen az analóg óra létrehozásának részeként kezeljük ezt a részletet.

Az analóg óra rajzolása

Itt kezdődik a móka! Emlékszel arra az elemre, amely olyan türelmesen várt ránk? Kicsit nehéz meglátni, hogy hol van az oldalon, ezért "vigyük előre" úgy, hogy körvonalunkat a digitális óráról a vásznunkra mozgatjuk.

A CSS-ben győződjön meg arról, hogy a kiemelt sor az # clock stílusszabályban jelenik meg, szemben a # current-time stílusszabályban:

Ha előnézeti oldalát, akkor a vászon vázlatosan jelenik meg, szemben magával az idővel:

A vászon tesztelése

Győződjünk meg róla, hogy a vásznunk megfelelően működik, rajzolva rá néhány sort. Hasznos lesz ott hagyni a digitális órát (így láthatjuk az aktuális időt az analóg óránk felett), ezért csak hagyja a régi JavaScript-et a displayTime függvényen belül, ahol van, és közvetlenül utána adja hozzá az analóg óra kódját.

Először piros vonalat fogunk tenni az óra közepétől jobbra (3 óra). Adja hozzá a következő kiemelt sorokat a displayTime funkcióhoz:

Ha ezt megnézi, akkor egy folytonos piros vonal jelenik meg az analóg óra közepén. Tegyünk még egy változtatást. Tegyünk hozzá egy fekete vonalat a közepétől a tetejéig (12 óra). Ne feledje, hogy nem kell újból létrehoznunk a változókat a vászonra vagy a kontextusra, csak újra felhasználhatjuk a piros vonalhoz létrehozottakat.

Adja hozzá ezt a kódot közvetlenül a context.stroke () sor után:

Ha most előnézeti a dokumentumot, egy fekete vonal jelenik meg a piros vonal kiegészítéseként:

Wohoo, most minden nap 3 óra van; nincs iskola!

Annak ellenére, hogy ez az óra garantáltan naponta kétszer helyes, még mindig nem elég praktikus a céljainkhoz. Több ellenőrzésre van szükségünk a fegyverek merre mutatnak.

Figyelem: Matematika előre!

Sajnos, ez a rész némi trigonometriát igényel. Csak az alapok ismeretében messzire kell vinni, de egy dolog, amit esetleg nem használtál, az a Tau állandó. Gondoljon rá, mint a jobb verziójára Pi amikor a dolgokat körökben kell kezelni. Tudjon meg többet Tau-ról (és PI-ről) a következő Khan Academy videón.

Így. annak elmagyarázása részeként, hogy egyelőre mentálisan távolítsuk el a fekete karot, és csak arra összpontosítsunk, hogy a piros órás karot megfelelően forgassuk. Amikor az órakar 2 órára mutat, eltűnt 2/12 éjjel-nappal. Tehát 2 órakor az óramutatónk arra mutat, ami van TAU * (2/12) radián.

Ha automatikusan meg akarjuk kapni ezt az értéket kód szerint, akkor a következőket tennénk:

Ezután meg kell ismernünk a kar hosszát; egyelőre a karot addig készítjük, amíg az óra sugara úgy van, hogy az az óra legszélére mutat. Csak annyit kell tennünk, hogy csak bedugja ezeket a számokat a meglévő kódba. Keresse meg a megjegyzést, amely azt mondja Tedd ide a matekot, és cserélje le ezeket a kódsorokat:

És most megrajzoljuk. Keresse meg a következő sorokat:

Most cserélje ki a két kiemelt sort a következő két sorra:

Ha minden rendben van, az oldal előnézetének megtekintésekor látnia kell az óramutatót arra az órára, amely éppen az Ön számára áll:

Odaérünk. lassan.

A többi kar hozzáadása

Éppen most van az óramutató megfelelő beállítása. Most csak másolhatjuk és beilleszthetjük az óramutató megjelenítéséhez szükséges kódot, de szerkeszthetjük percekre és másodpercekre. Ennek a ragyogó tervnek az a hátránya, hogy sok kódra lenne szükség, és ettől nem lennénk túl jó fejlesztők. Ehelyett mindezt egy olyan függvénybe tehetjük, amely megkarolja a karokat.

Ez megköveteli, hogy távolítsunk el és cseréljünk ki néhány kódot. A displayTime függvényben töröljön mindent a Math.TAU deklaráció után. A displayTime függvénynek a következőképpen kell kinéznie:

Most, a Math.TAU deklaráció után, folytassa, és adja hozzá a következő kódsorokat:

A teljes displayTime függvénynek most a következőképpen kell kinéznie:

Ha most előnézeti a dokumentumot, a következőképpen néz ki:

Most folytonos piros vonalakat kell látnia, amelyek az Ön órájának, percének és másodpercének értékét képviselik.

Szánjon néhány percet arra, hogy átnézze a kódot, és megtudja, hogyan tűnik minden együtt. Miután ezt megtette, egy fontos dolgot kell szem előtt tartanunk. Tegyük fel, hogy jelenleg az idő 3:10; kódunk szerint az óraérték az 3, így utaztak 3/12 éjjel-nappal (TAU * (3/12) radián). A perc értéke 10., de nem utazott 10/12 éjjel-nappal! Csak utazott 10/60 éjjel-nappal (TAU * (10/60) radián).

Éppen ezért az aktuális érték átadása helyett (mint például a példában 3 órára és 10 percre) egy progress nevű változót adunk át a drawArm függvénynek, amely azt ábrázolja, hogy a kar milyen hosszan haladt az óra mentén. Értéke 0 azt jelenti, hogy délben vagy, és 0.5 azt jelenti, hogy 6 órakor egyenesen lefelé mutat, és értéke 0,25 azt jelenti, hogy a kar az óra hármasánál jobbra mutat.

Most, hogy van jobb elképzelése a kódunk működéséről, javítsunk ki valamit, ami mostanában kissé idegesítő. Nos, láthatjuk a karokat, de mindegyik ugyanúgy néz ki. Adjunk hozzá még néhány paramétert a drawArm () függvényünkhöz, hogy meg tudjuk különböztetni őket.

Módosítsa (vagy cserélje ki) a drawArm függvényt az alábbiakkal:

Hasonlóan ahhoz, amit fentebb tettünk a haladással, az armLength paraméter értéke lehet 0 nak nek 1. Az 1-es érték azt jelenti, hogy egészen az óra széléig ér, míg a 0.5 azt jelenti, hogy a rögös apróság csak félúton megy ki. Így még akkor is, ha megváltoztatjuk az óránk méretét, nem rontja el a karunkat.

Most testreszabhatja karjait szívének megfelelően! Ezeket a paramétereket adja meg, amikor meghívja a drawArm parancsot, és ez a következő három sorban történik:

Hű akartam maradni a "klasszikus" óra kinézetéhez, ezért folytassa, és cserélje le ezeket a sorokat a következő paraméterekkel az általam választott színre és méretre:

Ha most előnézeti a dokumentumot, akkor az órájának a következőképpen kell kinéznie:

Extra hitel

Próbáld meg beállítani a karod paramétereit negatív vagy 1-nél nagyobb értékekre, és nézd meg, milyen szórakoztató lehet belőle.

Az órafegyverek mozgatása

Az óra remekül néz ki, de valahogy így van. nem mozog. Nincs többé 22:10:55 PM, ez így van 10 másodperccel ezelőtt. Nem lenne jó, ha az óra kezei önállóan mozognának?

Miért nem mozog semmi

Ahelyett, hogy először fejest ugranánk analóg óránk mozgatásába, először meglátogatjuk az eredeti digitális óránkat. Nézzük meg a kódunk első részét (a legelejét, amely azt mondja, hogy ne húzzuk az órát, amíg az egész oldal be nem töltődik):

Ezt a kódot egyszer hívják meg, mert az oldal csak egyszer töltődik be. Ahhoz, hogy ezt a pontot valóban haza lehessen vezetni, ez azt jelenti, hogy a displayTime () függvényünk csak egyszer fut. Hogyan folytatnánk újra és újra, és újra. és újra?

A setInterval () bemutatása

A praktikus setInterval () függvény újra és újra futtat egy funkciót, az egyes hívások között rés van. Ennek a funkciónak két paramétere van:

A futtatni kívánt funkció
A milliszekundumok száma az egyes futtatások között

Egy ezredmásodperc 1/1000 másodperc. Ha egy függvényt (például egy fiktív checkEmail funkciót) szeretne futtatni 5 másodpercenként (5000 ezredmásodpercenként), akkor a következő kódot használja:

Ettől a JavaScript így fog működni (vegye figyelembe, hogy várakozással indul):

Ha le akarja állítani a setInterval futtatását, nyomon kell követnie a setInterval által az első indításkor visszaadott értéket, majd át kell adnia ugyanazt az értéket a clearInterval számára. Ez valószínűleg zavarónak tűnik, így a következő példa bemutatja ennek működését:

Most, hogy megismerte a setInterval alapjait, használjuk varázserejét az óránkkal.

Óránk frissítése

Jelenleg van egy eseményfigyelőnk, amely meghallgatja a DOMContentLoaded/span> eseményt, és meghívja a displayTime függvényt:

Változtassunk ezen. Ahelyett, hogy az eseményfigyelő meghívná a displayTime-et, módosítsuk úgy, hogy meghívjuk a startTimer nevű függvényt. Addig adjuk hozzá a startTimer függvényt is:

Amit tettünk, az oldalunk hívja a startTimer függvényt, amint betöltődik. Ez a függvény tartalmazza a setInterval függvényt, amely minden alkalommal meghívja a displayTime-et 1000 ezredmásodperc (más néven 1 másodperc). Ezenkívül egy megjegyzendő dolog. Mivel az oldal betöltődése után azonnal meg akarjuk jeleníteni az időt, és ne várjunk 1 másodpercet, amíg a setInterval hívás elindul a displayTime élőben való megjelenéséért, a setTint interval hívás mellett kifejezetten egyszer hívjuk meg a displayTime-ot:

Menjen előre, és tekintse meg a dokumentumot, és nézze meg, hogyan néz ki minden. Néhány másodperc múlva látni fog valamit, ami így néz ki:

Egyértelmű, hogy valami nincs rendben. Ami történik, egyszerű. Minden másodpercben vonalak húzódnak a vászonra. A probléma az, hogy soha nem mondod meg a vásznaknak, hogy távolítsa el a régi sorokat, ezért csak ott tartja őket. A vászon egy részét törölheti a clearRect () függvény használatával. Ha ki akarja törölni a teljes vásznat (amit ebben az esetben meg is teszünk), akkor a hívás előtt adja hozzá a következő kiemelt sort a drawArm függvényekhez:

Miután hozzáadta ezt a sort, folytassa és nézze meg még egyszer az oldalát. Ezúttal az órád másodpercenként frissül, anélkül, hogy a múlt nyomát elhagynád. Láthatja a teljes forrást az általam létrehozott analóg órában, amely az egész kód ellenőrzése részeként itt azt csinálja, amit csinál.

Következtetés

Most, hogy elkészült az analóg óránk, nem lesz többé szükségünk a digitálisra. Szabadon törölheti és a kapcsolódó kódot, vagy egyszerűen elrejtheti CSS-sel:

Bár az analóg óránk már működik, még mindig nem túl szép; még sok mindent meg lehet vele csinálni! Ez az a rész, ahol kreatív leszel. Adja hozzá saját személyes adatait az órához, és mondja el nekünk, mit tett ebben a témában.