En la era digital, aprender a crear un reloj digital es una habilidad fundamental para cualquier desarrollador web. En este artículo, exploraremos cómo construir un reloj digital utilizando HTML, CSS y JavaScript. Este proyecto no solo es educativo, sino que también demuestra la interactividad de la web moderna. ¡Comencemos!
A lo largo de este artículo, aprenderemos:
Antes de sumergirnos en el código, organicemos nuestro proyecto con la siguiente estructura de archivos:
reloj-digital/ │ ├── index.html ├── styles.css └── script.js
Primero, abramos el archivo index.html y sus características básicas. Este archivo contendrá la estructura de nuestro reloj digital.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reloj Digital</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="reloj"> <h1 id="tiempo">00:00:00</h1> <p id="fecha"></p> </div> <script src="script.js"></script> </body> </html>
Ahora que nuestra estructura básica está lista, pasemos a estilizar nuestro reloj en el archivo styles.css.
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #282c34; color: white; font-family: 'Arial', sans-serif; } .reloj { text-align: center; border: 2px solid #61dafb; padding: 20px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } h1 { font-size: 48px; margin: 0; } p { font-size: 24px; }
Finalmente, implementaremos la funcionalidad del reloj en nuestro archivo script.js. Esto actualizará la hora automáticamente cada segundo.
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'); const tiempo = `${horas}:${minutos}:${segundos}`; document.getElementById('tiempo').textContent = tiempo; const opcionesFecha = { year: 'numeric', month: 'long', day: 'numeric' }; const fecha = ahora.toLocaleDateString('es-ES', opcionesFecha); document.getElementById('fecha').textContent = fecha; } // Actualizar cada segundo setInterval(actualizarReloj, 1000); // Llamar a la función para establecer el reloj inmediatamente al cargar la página actualizarReloj();
Ahora que hemos completado nuestro código, abre el archivo index.html en tu navegador. Deberías ver un reloj digital que se actualiza cada segundo, mostrando la hora y la fecha actuales.
Antes de concluir, aquí hay un resumen de lo que hemos aprendido:
Desde este punto, puedes expandir tu proyecto. Algunas ideas incluyen:
Con este tutorial, ahora tienes una base sólida para crear tu propio reloj digital. ¡Explora y experimenta con tus propias ideas!
Page loaded in 25.70 ms