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 Reloj digital. 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

Abre el index.html archivar y pegar el siguiente código:

Aquí un div se crea con un 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 un etiqueta. Similar, script.js es una página JS externa y está vinculada a la página HTML mediante el <guión> etiqueta.

Agregando funcionalidad al reloj digital usando JavaScript

Abre el script.js archivar y pegar el siguiente código:

función Tiempo () {
// Creando objeto de la clase Date
var fecha = nueva fecha ();
// Obtener la hora actual
var hora = fecha.getHours ();
// Obtener el minuto actual
var minuto = fecha.getMinutos ();
// Obtener el segundo actual
var second = date.getSeconds ();
// Variable para almacenar AM / PM
var period = "";
// Asignar AM / PM según la hora actual
if (hora> = 12) {
period = "PM";
} demás {
period = "AM";
}
// Conversión de la hora en formato de 12 horas
si (hora == 0) {
hora = 12;
} demás {
if (hora> 12) {
hora = hora - 12;
}
}
// Actualización de hora, minuto y segundo
// si son menos de 10
hora = actualización (hora);
minuto = actualización (minuto);
segundo = actualización (segundo);
// Añadiendo elementos de tiempo al div
document.getElementById ("reloj-digital"). innerText = hora + ":" + minuto + ":" + segundo + "" + punto;
// Establecer el temporizador en 1 seg (1000 ms)
setTimeout (Hora, 1000);
}
// Función para actualizar elementos de tiempo si son menores a 10
// Agrega 0 antes de los elementos de tiempo si son menores que 10
actualización de función (t) {
si (t <10) {
devuelve "0" + t;
}
demás {
return t;
}
}
Hora();

Comprensión del código JavaScript

La Hora() y actualizar() Las funciones 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 fecha = nueva fecha ();

La fecha y hora actuales se almacenarán en el fecha variable. 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 independientes para operaciones posteriores.

var hora = fecha.getHours ();
var minuto = fecha.getMinutos ();
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 meridiem es PM (Post Meridiem) de lo contrario, es AM (Ante Meridiem).

var period = "";
if (hora> = 12) {
period = "PM";
} demás {
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 superior a 12, se reduce en 12 para mantenerla alineada con el formato de 12 horas.

Relacionados: Cómo deshabilitar la selección de texto, cortar, copiar, pegar y hacer clic con el botón derecho en una página web

si (hora == 0) {
hora = 12;
} demás {
if (hora> 12) {
hora = hora - 12;
}
}

Actualización de los elementos de tiempo

Debe actualizar los elementos de hora 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).

hora = actualización (hora);
minuto = actualización (minuto);
segundo = actualización (segundo);
actualización de función (t) {
si (t <10) {
devuelve "0" + t;
}
demás {
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 innerText setter.

document.getElementById ("reloj-digital"). innerText = hora + ":" + minuto + ":" + segundo + "" + punto;

Actualización del reloj cada segundo

El reloj se actualiza cada segundo usando el setTimeout () método en JavaScript.

setTimeout (Hora, 1000);

Diseñar el reloj digital con CSS

Abre el styles.css archivar y pegar el siguiente código:

Relacionados: Cómo usar CSS box-shadow: trucos y ejemplos

/ * Importando fuente de Google Open Sans Condensed * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#reloj digital {
color de fondo: # 66ffff;
ancho: 35%;
margen: automático;
padding-top: 50px;
fondo acolchado: 50px;
familia de fuentes: 'Open Sans Condensed', sans-serif;
tamaño de fuente: 64px;
alineación de texto: centro;
caja-sombra: 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 fuentes de Google usando @importar. La #reloj digital El selector de id se utiliza para seleccionar el div de destino. El selector de id usa el identificación atributo de un elemento HTML para seleccionar un elemento específico.

Relacionados: Ejemplos de código CSS simple que puede aprender en 10 minutos

Si desea ver el código fuente completo utilizado en este artículo, aquí está el Repositorio de GitHub. Además, si desea ver la versión en vivo de este proyecto, puede consultarlo a través de Páginas de GitHub.

Nota: El código utilizado en este artículo es Con 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 de Hangman, Tic Tac Toe, una aplicación meteorológica de JavaScript, una página de inicio interactiva, una herramienta de conversión de peso, piedra, papel, tijeras, etc.

Si está buscando su próximo proyecto basado en JavaScript, una calculadora simple es una excelente opción.

Cómo construir una calculadora simple usando HTML, CSS y JavaScript

El código simple y calculado es el camino a seguir al programar. Vea cómo construir su propia calculadora en HTML, CSS y JS.

Leer siguiente

Sobre el Autor