Puedes crear un reloj digital simple utilizando HTML, CSS y JavaScript.
Aquí tienes un ejemplo básico de cómo hacerlo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reloj con JavaScript</title>
<style>
#clock {
font-size: 3em;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function displayTime() {
const clock = document.getElementById('clock');
const currentTime = new Date();
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
const seconds = currentTime.getSeconds();
const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
clock.textContent = timeString;
}
// Actualizar el reloj cada segundo
setInterval(displayTime, 1000);
// Mostrar la hora al cargar la página
displayTime();
</script>
</body>
</html>
En este código, se usa HTML para crear un contenedor <div> con el ID «clock», donde se mostrará la hora. Luego, se aplica un poco de CSS para darle formato.
JavaScript se encarga de obtener la hora actual y actualizar el reloj cada segundo. La función displayTime obtiene la hora actual con la ayuda de new Date() y luego muestra las horas, minutos y segundos en el formato HH:MM:SS en el elemento con el ID «clock».
El setInterval se utiliza para llamar a la función displayTime cada segundo (1000 milisegundos), manteniendo actualizado el reloj. Además, se llama a displayTime una vez al inicio para mostrar la hora actual en el momento de carga de la página.
Puedes modificar el código y estilos para personalizar el diseño del reloj según tus preferencias.