Cómo crear un reloj digital usando HTML, CSS y JavaScript
El reloj digital se encuentra entre los mejores proyectos para principiantes en JavaScript. Es bastante fácil de aprender para personas de cualquier nivel.
En este artículo, aprenderá a crear su propio reloj digital utilizando HTML, CSS y JavaScript. Obtendrá experiencia práctica con varios conceptos de JavaScript, como crear variables, usar funciones, trabajar con fechas, acceder y agregar propiedades a DOM, y más.
Empecemos.
Componentes del reloj digital
El reloj digital tiene cuatro partes: hora, minuto, segundo y meridiano.
Estructura de carpetas del proyecto de reloj digital
Cree una carpeta raíz que contenga los archivos HTML, CSS y JavaScript. Puede nombrar los archivos como desee. Aquí la carpeta raíz se llama Digital-Clock . De acuerdo con la convención de nomenclatura estándar, los archivos HTML, CSS y JavaScript se denominan index.html , styles.css y script.js respectivamente.
Agregar estructura al reloj digital usando HTML
Abra el archivo index.html y pegue el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "script.js"> </script>
</body>
</html>Aquí, se crea un div con una identificación de reloj digital . Este div se usa para mostrar el reloj digital usando JavaScript. styles.css es una página CSS externa y está vinculada a la página HTML mediante una etiqueta <link> . De manera similar, script.js es una página JS externa y está vinculada a la página HTML mediante la etiqueta < script> .
Agregando funcionalidad al reloj digital usando JavaScript
Abra el archivo script.js y pegue el siguiente código:
function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = "";
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}
Time();Comprensión del código JavaScript
Las funciones de hora () y actualización () se utilizan para agregar funcionalidad al reloj digital.
Obtener los elementos de tiempo actual
Para obtener la fecha y hora actuales, debe crear un objeto Date. Esta es la sintaxis para crear un objeto Date en JavaScript:
var date = new Date();La fecha y hora actuales se almacenarán en la variable de fecha . Ahora debe extraer la hora, los minutos y los segundos actuales del objeto de fecha.
date.getHours () , date.getMinutes () y date.getSeconds () se utilizan para obtener la hora, los minutos y los segundos actuales, respectivamente, del objeto de fecha. Todos los elementos de tiempo se almacenan en variables separadas para operaciones posteriores.
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();Asignación del Meridiem actual (AM / PM)
Dado que el reloj digital tiene un formato de 12 horas, debe asignar el meridiano apropiado de acuerdo con la hora actual. Si la hora actual es mayor o igual a 12, entonces el meridiano es PM (Post Meridiem); de lo contrario, es AM (Ante Meridiem).
var period = "";
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}Conversión de la hora actual en formato de 12 horas
Ahora necesita convertir la hora actual a un formato de 12 horas. Si la hora actual es 0, la hora actual se actualiza a 12 (según el formato de 12 horas). Además, si la hora actual es mayor que 12, se reduce en 12 para mantenerla alineada con el formato de hora de 12 horas.
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}Actualización de los elementos de tiempo
Debe actualizar los elementos de tiempo si son menores de 10 (un solo dígito). Se agrega 0 a todos los elementos de tiempo de un solo dígito (hora, minuto, segundo).
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}Agregar los elementos de tiempo al DOM
Primero, se accede al DOM usando la identificación del div de destino ( reloj digital ). Luego, los elementos de tiempo se asignan al div usando el setter innerText .
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;Actualización del reloj cada segundo
El reloj se actualiza cada segundo usando el método setTimeout () en JavaScript.
setTimeout(Time, 1000);Diseñar el reloj digital con CSS
Abra el archivo styles.css y pegue el siguiente código:
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}El CSS anterior se utiliza para diseñar el reloj digital. Aquí, la fuente Open Sans Condensed se usa para mostrar el texto del reloj. Se importa de las fuentes de Google mediante @import . El selector de ID de reloj digital # se utiliza para seleccionar el div objetivo. El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
Si desea ver el código fuente completo utilizado en este artículo, aquí está el repositorio de GitHub . Además, si desea echar un vistazo a la versión en vivo de este proyecto, puede consultarlo a través de las páginas de GitHub .
Nota : El código utilizado en este artículo tiene licencia del MIT .
Desarrollar otros proyectos de JavaScript
Si eres un principiante en JavaScript y quieres ser un buen desarrollador web, necesitas crear algunos buenos proyectos basados en JavaScript. Pueden agregar valor a su currículum y a su carrera.
Puede probar algunos proyectos como Calculadora, un juego Hangman, Tic Tac Toe, una aplicación meteorológica de JavaScript, una página de inicio interactiva, una herramienta de conversión de peso, Rock Paper Scissors, etc.
Si está buscando su próximo proyecto basado en JavaScript, una calculadora simple es una excelente opción.