[JS] Plantilla de Reloj Digital (formato 24 horas)
Cómo mostrar la hora actual en tiempo real con JavaScript
⏰ Casos de uso y beneficios de esta plantilla
- Puede mostrar la hora actual en tiempo real
- Aprende los conceptos básicos de setInterval
- Actualización automática sin necesidad de eventos
- Aplicable para blogs, tiendas y entornos educativos
📋 Copia y usa el código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar la hora actual</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#clock {
font-size: 3rem;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Hora actual</h1>
<div id="clock">--:--:--</div> <!-- El valor inicial está configurado como "--:--:--" -->
<script>
setInterval(() => {
const now = new Date();
const hh = now.getHours().toString().padStart(2, '0'); // Horas
const mm = now.getMinutes().toString().padStart(2, '0'); // Minutos
const ss = now.getSeconds().toString().padStart(2, '0'); // Segundos
document.getElementById("clock").textContent = `${hh}:${mm}:${ss}`; // Mostrar hora
}, 1000); // Actualizar cada 1 segundo
</script>
</body>
</html>
🧩 Aplicaciones y consejos de uso
Esta plantilla utiliza setInterval(() => {...}, 1000) para actualizar la hora actual cada segundo. Como muestra la hora en tiempo real sin necesidad de recargar la página, es ideal para señalización digital, paneles informativos u otras situaciones donde se necesite mostrar la hora actualizada constantemente.
Además, el uso de padStart(2, '0') garantiza que los números de un solo dígito siempre se muestren con dos cifras, manteniendo el formato del reloj limpio y uniforme.
💡 Ideas para personalizar
Si deseas agregar un indicador AM/PM, puedes usar lógica condicional basada en el valor de getHours(). Para mostrar también la fecha o el día de la semana, puedes usar getFullYear() y getDay().
La apariencia del reloj puede personalizarse fácilmente con CSS, así que siéntete libre de cambiar el color de fondo o el tamaño de la fuente para que coincida con el diseño de tu sitio web.