Home-theater-designers
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.
cómo quitar el protector de pantalla de plástico
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:
|_+_|Comprensión del código JavaScript
los Tiempo() 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:
|_+_|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 separadas para operaciones posteriores.
|_+_|Asignación del mediodía 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).
|_+_|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 12 horas.
Relacionado: Cómo deshabilitar la selección de texto, cortar, copiar, pegar y hacer clic con el botón derecho en una página web
|_+_|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).
|_+_|Agregar los elementos de tiempo al DOM
En primer lugar, se accede al DOM mediante la identificación del div de destino ( reloj digital ). Luego, los elementos de tiempo se asignan al div usando el innerText setter.
|_+_|Actualización del reloj cada segundo
El reloj se actualiza cada segundo usando el setTimeout () método en JavaScript.
|_+_|Diseñar el reloj digital con CSS
Abre el styles.css archivar y pegar el siguiente código:
Relacionado: Cómo utilizar CSS box-shadow: trucos y ejemplos
|_+_|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 . los #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.
Relacionado: 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 echar un vistazo a 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.
como borrar instagram de facebook
Si está buscando su próximo proyecto basado en JavaScript, una calculadora simple es una excelente opción.
Cuota Cuota Pío Correo electrónico Cómo construir una calculadora simple usando HTML, CSS y JavaScriptEl 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 Temas relacionados- Wordpress y desarrollo web
- Programación
- HTML
- Desarrollo web
- JavaScript
- CSS
Yuvraj es estudiante de licenciatura en Ciencias de la Computación en la Universidad de Delhi, India. Le apasiona el desarrollo web Full Stack. Cuando no está escribiendo, está explorando la profundidad de diferentes tecnologías.
Más de Yuvraj ChandraSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse