Mobilné Správy, Gadgety, Blogy's Secenziami

Keeping Time: zbierka útržkov časovača a kódu hodín

Akt zobrazovania času je na webe dosť populárny. Ale nie je to vôbec obmedzené na to, čo zvyčajne nosíme na zápästí alebo visíme na stene.

Tradičné hodinky určite môžu pridať k estetike webovej stránky alebo aplikácie. Je to však skutočne užitočné iba v určitých situáciách, pretože obrazovky našich zariadení už ukazujú základné informácie.

Jedna oblasť, v ktorej skutočne svieti čas, sa počíta nahor alebo nadol. Či už ukazujete uplynutý čas udalosti, napríklad online kvíz alebo počet dní do uvedenia veľkého produktu na trh, tieto položky môžu pridať trochu vzrušenia. Okrem toho môžu zohrávať dôležitú úlohu v celkovej používateľskej skúsenosti.

Pozrime sa na niektoré útržky kódu, ktoré môžete použiť na to, aby ste do svojich projektov dostali časovo funkčnú funkciu.

High-tech Vue

Aj keď náš prvý príklad sa môže hodiť k tradičnejším hodinám, má tiež ultramoderný vzhľad. Postavený pomocou Vue.js, ukazuje, ako môže dizajn pridať dotyk osobnosti k najzákladnejším technológiám.

Pozrite si pero Toshiyuki TAKAHASHI's Pen s digitálnymi hodinkami Vue.js

Veľmi meta

Hodinky vyrobené z … hodinky? Môže to znieť ďaleko, ale presne to je tento úryvok iba pre CSS. Sledujte, ako sa „ruky“ na vybraných minibankách zhodujú, aby sa počítal uplynutý čas. Rovnako ako najlepšie švajčiarske hodinky, sú pohyby neuveriteľne zložité.

Pozrite si hodinky Razvan Spatariu Hodinky s guľôčkovým perom

Odpočítavanie spustenia

Odpočítavanie sa bežne používa na vytváranie očakávaní veľkej udalosti. Možno je to nový produkt, konferencia alebo dokonca filmová premiéra. Sú rovnako zábavné a užitočné. Tento atraktívny príklad ponúka 24-hodinové odpočítavanie v klasickom štýle flip.

Prečítajte si odpočítavanie pera od Doriana Camilleriho

Ďalšia dovolenka je vždy za rohom

Odpočítavanie môže tiež priniesť úžitok webovým stránkam elektronického obchodu, ktoré sa chcú zamerať na konkrétnu dovolenku. V tomto prípade je to deň nezávislosti v USA. Ale skrytý predmet, ako je tento, by mohol byť skvelým pomocníkom pre prakticky každý špeciálny deň, na ktorý by ste chceli upozorniť.

Pozrite si časovač odpočítavania DailyUI Pen # 014 od Julie Park

Rýchly čas

Zdá sa, že sa vracajú uvítacie obrazovky. Ale namiesto toho, aby používatelia nechali kliknúť na ďalší krok, načasované presmerovanie môže byť dobrým spôsobom, ako vyjadriť svoj názor bez prílišných problémov. Táto animácia odpočítavania starých filmov školy by mohla byť pre takéto použitie ideálna.

Sledujte odpočítavanie filmu Craig Roblewsky's Pen Movie Style

Dotyk triedy

Špičkové hodinky nikdy nevyjdú z módy. Vďaka krásnemu vzhľadu a presným pohybom zachytávajú fantáziu. Tu máme vernú rekreáciu hodiniek Rolex. Nemusí to byť také užitočné pre vaše každodenné webové stránky, ale aj tak niečo, čo môžete obdivovať.

Sledujte večné ponorky Pen Rolex Oyster Perpetual Submariner: Čistú ilustráciu HTML / CSS od Chrisa Oty

chronograf

Stopky, ktoré sú synonymom športu, sa používajú na meranie času od olympijských pretekov po časy Formule 1, V tomto duchu je táto čistá rekreácia CSS jednoduchá a krásna. Tento pohyb je pozoruhodný bez toho, aby bol ohromujúci.

Pozrite sa na stopky na pere Hilo

celosvetovo

Pravdepodobne najdôležitejšie použitie online hodiniek je zobrazovanie údajov z rôznych časových pásiem. Tento úžasný úryvok používa Vue.js a využíva prehliadač na zobrazenie plánov celého sveta. Všimnite si, ako sa displej mení zo dňa na noc, v závislosti od času vo vybranej krajine.

Pozri porovnanie času Pen Vue Sarah Drasner

Čas vypršal

Implementácia času, bez ohľadu na tvar, do vášho projektu pridá ďalšiu vrstvu detailov. Aj keď to nemusí byť nevyhnutne hlavným rysom, môže slúžiť ako prostriedok na informovanie a zábavu.

Okrem užitočnosti pri webdizajne sú tieto hodiny a časovače tiež vynikajúcim úvodom k tomu, ako jazyky ako JavaScript fungujú. Pri pohľade na jeden z úryvkov vyššie pochopíte, ako sa tieto rôzne úryvky kódu kombinujú.

Či už teda chcete pridať svoju interaktivitu na svoj web alebo len experimentovať, v tejto kolekcii je niečo pre vás. A ak chcete vidieť viac príkladov, pozrite si našu kolekciu CodePen.