Keeping Time: una colección de fragmentos de temporizador y código de reloj

El acto de mostrar el tiempo es bastante popular en la web. Pero no se limita a lo que normalmente usamos en la mu√Īeca o colgado en la pared.

Ciertamente, un reloj tradicional puede aumentar la est√©tica de un sitio web o aplicaci√≥n. Sin embargo, esto es realmente muy √ļtil en ciertas situaciones, teniendo en cuenta que las pantallas de nuestros dispositivos ya muestran lo b√°sico.

Un √°rea donde el tiempo realmente brilla es contar hacia arriba o hacia abajo. Ya sea que est√© mostrando el tiempo transcurrido desde un evento, como un cuestionario en l√≠nea o la cantidad de d√≠as hasta que se lance un gran producto, estos elementos pueden agregar un poco de emoci√≥n. Adem√°s, pueden desempe√Īar un papel importante en la experiencia general del usuario.

Echemos un vistazo a algunos fragmentos de código que puede usar para aportar funcionalidad relacionada con el tiempo a sus proyectos.

Un Vue de alta tecnología

Aunque nuestro primer ejemplo puede usarse en relojes m√°s tradicionales, tambi√©n tiene un aspecto ultramoderno. Construido con Vue.js, muestra c√≥mo el dise√Īo puede agregar un toque de personalidad a las tecnolog√≠as m√°s b√°sicas.

Vea el bolígrafo Toshiyuki TAKAHASHI con el reloj digital Vue.js.

Muy meta

¬ŅUn reloj hecho de … relojes? Puede parecer distante, pero de eso se trata este fragmento de CSS. Observe c√≥mo cambian las “manecillas” de los mini relojes seleccionados al un√≠sono para contar el tiempo transcurrido. Al igual que los mejores relojes suizos, los movimientos son incre√≠blemente complejos.

Ver reloj bolígrafo Razvan Spatariu Watches

Cuenta atr√°s para lanzar

Las cuentas regresivas se usan ampliamente para generar anticipaci√≥n para un evento importante. Quiz√°s sea un producto nuevo, una conferencia o incluso un estreno de cine. Son igualmente divertidos y √ļtiles. Este atractivo ejemplo ofrece una cuenta regresiva de 24 horas en el cl√°sico estilo “flip”.

Mira la cuenta regresiva del borrador de la pluma de Dorian Camilleri

Las próximas vacaciones siempre vienen

Una cuenta regresiva también puede beneficiar a los sitios de comercio electrónico que desean centrarse en unas vacaciones específicas. En ese caso, es el Día de la Independencia en los Estados Unidos. Pero un artículo disfrazado como este puede ser un gran toque para casi cualquier día especial al que le gustaría llamar la atención.

Ver DailyUI Pen # 014 Timer por Julie Park

Tiempo r√°pido

Las pantallas de bienvenida parecen estar volviendo. Pero en lugar de permitir que los usuarios hagan clic en el siguiente paso, una redirección cronometrada puede ser una buena manera de expresar su opinión sin demasiado trabajo. Esta animación de cuenta regresiva de la película de la vieja escuela podría ser perfecta para ese uso.

Mira la cuenta regresiva de la película estilo pluma de Craig Roblewsky

Un toque de clase

Los relojes de lujo nunca pasan de moda. Con un aspecto hermoso y movimientos de precisi√≥n, capturan la imaginaci√≥n. Aqu√≠, tenemos una recreaci√≥n fiel de un reloj Rolex. Puede que no sea tan √ļtil para su sitio web todos los d√≠as, pero s√≠ algo para admirar.

Mire la pluma Rolex Oyster Perpetual Submariner: la ilustración HTML / CSS pura de Chris Ota

Cronógrafo

Sinónimo de deporte, los cronómetros se usan para cronometrar todo, desde carreras olímpicas hasta tiempos de Fórmula 1. En este espíritu, esta recreación pura de CSS es simple y hermosa. El movimiento es notable sin ser abrumador.

Mira el temporizador en el bolígrafo Hilo

Alrededor del mundo

Quiz√°s el uso m√°s relevante para un reloj en l√≠nea es mostrar lecturas de m√ļltiples zonas horarias. Este magn√≠fico fragmento utiliza Vue.js y aprovecha el navegador para mostrar la hora en todo el mundo. Observe c√≥mo cambia la pantalla de d√≠a a noche, dependiendo de la hora en la ubicaci√≥n seleccionada.

Ver Pen Vue Time Comparison por Sarah Drasner

El tiempo ha terminado

El tiempo de implementación, independientemente de la forma, en su proyecto agrega una capa adicional de detalles. Aunque no es necesariamente la característica principal, puede servir como un medio de información y entretenimiento.

Adem√°s de su utilidad en el dise√Īo web, estos relojes y temporizadores tambi√©n son una excelente introducci√≥n al funcionamiento de lenguajes como JavaScript. Si observa uno de los fragmentos de c√≥digo anteriores, comprender√° c√≥mo se combinan estos diversos fragmentos de c√≥digo.

Entonces, ya sea que desee agregar algo de interactividad a su sitio o simplemente probarlo, hay algo para usted en esta colección. Y si desea ver más ejemplos, consulte nuestra colección CodePen.