Cómo Crear un Reloj Digital Dinámico con JavaScript
En este tutorial, aprenderemos cómo crear un reloj digital en una página web utilizando solo HTML, CSS y JavaScript. Este proyecto es perfecto si estás comenzando a aprender JavaScript y quieres crear algo práctico y visualmente atractivo. ¡Vamos a darle vida al tiempo!
Descripción: Comienza creando un nuevo archivo HTML y configúralo con la estructura básica. Agrega un contenedor para mostrar el reloj.
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metahttp-equiv="X-UA-Compatible"content="IE=edge" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Reloj Digitaltitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<divid="clock"class="clock">div>
<scriptsrc="script.js">script>
body>
html>
Descripción: Crea un archivo CSS para darle estilo al reloj. Centra el reloj en la página y elige una fuente y un tamaño que te gusten.
/* styles.css */body,
html {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #333;
font-family: "Arial", sans-serif;
}
.clock {
font-size: 5em;
color: #ffffff;
}
Descripción: Ahora es momento de darle vida al reloj. Crea un archivo JavaScript y escribe una función que actualice el tiempo cada segundo.
// script.jsfunctionupdateClock() {
const now = newDate();
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById("clock").innerText = timeString;
}
setInterval(updateClock, 1000);
Descripción: Abre tu archivo HTML en un navegador web y deberías ver tu reloj digital en acción, actualizándose cada segundo.
¡Felicidades! Has creado un reloj digital dinámico con JavaScript. Puedes jugar con los estilos en CSS y hacerlo más personalizado.
Recomiendo intentar agregar funcionalidades adicionales, como cambiar entre un formato de 12 y 24 horas, o mostrar la fecha actual junto con la hora. Estos retos adicionales te ayudarán a mejorar tus habilidades en JavaScript!
