Obs: I nästa ämne du kommer att läsa kommer du att lära dig om: Keeping Time: en samling timers och klockavsnitt
Handlingen att visa tid är ganska vanligt på webben. Men det är inte begränsat till allt som vi brukar ha på handleden eller hänga på väggen.
Visst, en traditionell klocka kan lägga till estetiken hos en webbplats eller app. Det är dock bara riktigt användbart i vissa situationer, eftersom skärmarna på våra enheter redan visar grunderna.
Ett område där tiden verkligen lyser är att räkna upp eller ner. Oavsett om du visar den förflutna tiden för ett evenemang, till exempel ett online-quiz, eller antalet dagar tills en fantastisk produkt lanseras, kan dessa föremål lägga till lite spänning. Dessutom kan de spela en viktig roll i den övergripande användarupplevelsen.
Låt oss ta en titt på några kodavsnitt som du kan använda för att få tidsrelaterad funktionalitet till dina projekt.
Högteknologisk Vue
Även om vårt första exempel kan vara mer lämpligt för en mer traditionell klocka, har den också ett ultramodernt utseende. Den är byggd med Vue.js och visar hur design kan ge lite personlighet till den mest grundläggande tekniken.
Se Toshiyuki TAKAHASHIs penna med Vue.js digital klocka
Mycket meta
En klocka gjord av… klockor? Det låter långsökt, men det är precis vad detta CSS-utdrag är. Se “visarna” på den valda miniklockan ändras samtidigt för att räkna den förflutna tiden. Liksom de finaste schweiziska klockorna är urverken mycket komplicerade.
Se Razvan Spatariu klockor
Nedräkning till start
Nedräkningar används ofta för att generera förutsägelser för en större händelse. Kanske är det en ny produkt, en konferens eller till och med en filmpremiär. De är alla lika intressanta och användbara. Detta fascinerande exempel erbjuder en klassisk “flip” 24-timmarsnedräkning.
Se Dorian Camilleris Eraser Countdown
Nästa semester är alltid runt hörnet
Nedräkningen kan också vara fördelaktig för e-handelssajter som vill fokusera på en viss högtid. I det här fallet är det självständighetsdagen i Amerika. Men en förklädd pjäs som denna kan vara en stor accent till nästan vilken speciell dag du vill uppmärksamma.
Titta på Julie Parks DailyUI Pen #014 Countdown Timer
Snabb tid
Välkomstskärmen verkar komma tillbaka. Men istället för att låta användaren klicka på nästa steg kan en tidsinställd omdirigering vara ett bra sätt att uttrycka din åsikt utan alltför mycket krångel. Denna gamla skolans filmnedräkningsanimation kan vara perfekt för en sådan användning.
Se Craig Roblewskys nedräkning av filmstil
En klass
High-end klockor går aldrig ur mode. Med sitt vackra utseende och precisa rörelser fångar de fantasin. Här har vi en trogen återskapande av en Rolex-klocka. Det kanske inte är användbart för din dagliga webbplats, men det är ändå beundransvärt.
Se Rolex Oyster Perpetual Submariner Pen: Ren HTML/CSS Illustration av Chris Ota
Stoppur
Synonymt med sport används kronografer för att tajma allt från olympiska lopp till Formel 1-banor. I den andan är denna rena CSS-rekreation enkel och vacker. Rörelse märks utan att vara överväldigande.
Tittar på stoppuret på Hilo bút pennan
Över hela världen
Den kanske mest relevanta användningen av en onlineklocka är att visa avläsningar från olika tidszoner. Det här fantastiska utdraget använder Vue.js och använder webbläsaren för att visa världens schema. Lägg märke till hur displayen ändras från dag till natt, beroende på tiden i den valda lokalen.
Se Sarah Drasners Pen Vue Time Comparison
Tiden har gått
Tid det tar, oavsett form, för ditt projekt lägger till ett extra lager av detaljer. Även om det inte nödvändigtvis är huvudfunktionen, kan det fungera som ett sätt för information och underhållning.
Förutom deras användbarhet i webbdesign, är dessa klockor och timers också en bra introduktion till hur språk som JavaScript fungerar. Genom att titta på något av ovanstående kodavsnitt förstår du hur de olika kodbitarna kombineras.
Så oavsett om du vill lägga till lite interaktivitet på din webbplats eller bara experimenterar, så finns det något för dig i den här samlingen. Och om du vill se fler exempel, kolla in vår CodePen-kollektion.
