TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget de reloj digital simple para Weebly

154

En nuestro artículo anterior, explicamos cómo crear un reloj de estilo analógico con HTML5 Canvas JavaScript. Creemos un widget de reloj digital simple para el sitio Weebly. El widget obtendrá la hora del reloj de su computadora y mostrará la hora en horas, minutos y segundos. A continuación se muestra cómo se verá el widget.

El widget contiene parte de CSS, JavaScript y HTML y lo explicaremos uno por uno en detalle.

JavaScript para reloj digital

A continuación se muestra la secuencia de comandos para obtener las horas, minutos y segundos del reloj de su computadora. La primera línea de secuencia de comandos es el enlace de la biblioteca de secuencia de comandos jQuery para que funcione el widget.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script>

Nota: En caso de que el script no funcione en su sitio Weebly, reemplace la variable $ con jQuery y vuelva a publicar el sitio.

CSS para el widget

El CSS tiene tres clases: .time, .clock y .align. La clase ".time" se usa para alinear los números de reloj, mientras que la clase ".clock" se usa para configurar los estilos de reloj. La clase ".align" se usa simplemente para ajustar el margen y el tamaño de fuente.

<style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style>

HTML para el widget

A continuación se muestra el código HTML del widget:

<div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div>

El colon: se utiliza como separador entre horas, minutos y segundos.

Código completo para el widget de reloj digital

El widget completo se verá como a continuación agregando el script, CSS y HTML juntos.

<html> <head> <style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style> </head> <body> <div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script> </body> </html>

Insertar el widget en el sitio Weebly

Hay muchas formas de insertar el widget de reloj digital en su sitio Weebly.

Personalización del widget

Ajuste las siguientes propiedades CSS para personalizar el widget según sus necesidades:

  • Cambie el color de fondo modificando "darkslateblue" en "background-color: darkslateblue;".
  • Cambie el color de los números modificando el "color: #fff;" propiedad en la clase ".time".
  • Cambie el color del separador con el "color: #fff;" en la clase ".clock".
  • El peso de la fuente, el margen y el tamaño de la fuente se pueden ajustar con las propiedades de la clase ".align".

A continuación se muestran algunos de los ejemplos de relojes digitales con diferentes variaciones de color. Los relojes se colocan uno al lado del otro en el sitio de Weebly mediante el elemento de código incrustado. Puede ver la demostración de relojes digitales en el sitio de Weebly aquí.

Widget de reloj digital simple para Weebly

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More