Reloj Digital Interactivo: Dale vida a tu web: Dale vida a tu web -

Reloj Digital Interactivo: Dale vida a tu web

Reloj Digital Interactivo. Este script de reloj digital es la forma perfecta de añadir un toque moderno y dinámico a tu página web. Más allá de ser una simple utilidad, se convierte en un elemento de diseño que capta la atención del usuario.

El código está diseñado para ser fácilmente personalizable, permitiéndote adaptar el aspecto del reloj para que encaje a la perfección con la estética de tu sitio. Con solo unos pocos ajustes en el CSS, puedes cambiar el color, el tamaño y hasta el brillo del reloj, transformándolo en un detalle único para tu web.

Características destacadas:

Diseño atractivo: El reloj no es solo funcional, sino que también tiene una apariencia visualmente impactante con efectos de brillo y un fondo semitransparente.
Fácil de incrustar: No necesitas librerías externas. Simplemente copia y pega el código en tu HTML y el reloj comenzará a funcionar al instante.
Totalmente editable: Puedes modificar el tamaño, los colores, las animaciones y la tipografía para que se adapte al estilo de tu marca.

Con este script, puedes ofrecer una experiencia de usuario más rica y atractiva, demostrando que te preocupas por los pequeños detalles de tu sitio.

Código del Reloj Digital Interactivo.

Simplemente copia y pega el siguiente código en el cuerpo de tu documento HTML (<body>). Incluye el HTML, el CSS y el JavaScript.

HTML

<div id="reloj" class="reloj-digital"></div>

<style>
  /* Estilos para el reloj digital */
  .reloj-digital {
    /* **Edita el tamaño aquí** */
    font-size: 4rem; 
    padding: 15px 30px; 

    /* Estilos de diseño */
    font-weight: bold;
    color: #00ff99; /* Color neón */
    text-shadow: 0 0 10px #00ff99, 0 0 20px #00ff99; /* Efecto de brillo */
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
    border: 2px solid rgba(255, 255, 255, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Animación */
    animation: brillo-reloj 2s infinite alternate;

    /* Posicionamiento opcional: si quieres centrarlo en su contenedor */
    display: table;
    margin: 50px auto; 
  }

  /* Animación para el efecto de brillo */
  @keyframes brillo-reloj {
    from {
      text-shadow: 0 0 10px #00ff99, 0 0 20px #00ff99, 0 0 30px #00ff99;
    }
    to {
      text-shadow: 0 0 5px #00ff99, 0 0 15px #00ff99, 0 0 25px #00ff99;
    }
  }

  /* Estilo responsivo para pantallas más pequeñas */
  @media (max-width: 600px) {
    .reloj-digital {
      font-size: 2rem;
      padding: 10px 20px;
    }
  }
</style>

<script>
  function actualizarReloj() {
    const ahora = new Date();
    const horas = String(ahora.getHours()).padStart(2, '0');
    const minutos = String(ahora.getMinutes()).padStart(2, '0');
    const segundos = String(ahora.getSeconds()).padStart(2, '0');
    document.getElementById('reloj').textContent = `${horas}:${minutos}:${segundos}`;
  }

  // Actualiza el reloj cada segundo
  setInterval(actualizarReloj, 1000);

  // Llama a la función al cargar la página para evitar un retraso inicial
  actualizarReloj();
</script>

Detalles del diseño y cómo editarlo

font-size: Controla el tamaño de los números. Puedes cambiar 8rem por un valor más grande o pequeño.
color: Define el color principal de la hora. El valor actual #00ff99 es un verde neón, pero puedes usar cualquier código de color hexadecimal.
text-shadow: Crea un efecto de brillo. El valor actual utiliza el mismo color que el texto para simular un resplandor.
background: Le da al fondo del reloj una apariencia de «cristal esmerilado» o semitransparente. Puedes cambiar el valor de rgba(0, 0, 0, 0.4) para ajustar la opacidad. Si borras la opacidad 0.4, quedará el color (0, 0, 0) color negro, por ejemplo.
@keyframes brillo-reloj: Esta animación hace que el brillo del reloj parpadee suavemente. Si quieres desactivarla, simplemente elimina las líneas de animation en la clase .reloj-digital.
No necesitas cambiar la zona horaria, ya que el script reconocerá automáticamente la configuración local del dispositivo del usuario.

Con estos estilos y la estructura de código, tienes un reloj funcional y visualmente atractivo que puedes personalizar fácilmente para que se adapte al diseño de tu sitio web.

Ejemplo de como queda el reloj con un fondo negro

👉 Más utilidades Web

Comparte esta información:

WhatsApp X (Twitter) Facebook Email Telegram