Home-theater-designers
El rellotge digital es troba entre els millors projectes per a principiants en JavaScript. És molt fàcil d'aprendre per a persones de qualsevol nivell.
En aquest article, aprendreu a crear un rellotge digital propi mitjançant HTML, CSS i JavaScript. Tindreu experiència pràctica amb diversos conceptes de JavaScript com ara crear variables, utilitzar funcions, treballar amb dates, accedir i afegir propietats a DOM i molt més.
Jocs Android de 2 jugadors, telèfons independents
Comencem.
Components del rellotge digital
El rellotge digital té quatre parts: hora, minut, segon i meridiem.
Estructura de carpetes del projecte del rellotge digital
Creeu una carpeta arrel que contingui els fitxers HTML, CSS i JavaScript. Podeu anomenar els fitxers com vulgueu. Aquí s’anomena la carpeta arrel Rellotge digital . Segons la convenció estàndard de denominació, s’anomenen els fitxers HTML, CSS i JavaScript index.html , styles.css , i script.js respectivament.
Afegir estructura al rellotge digital mitjançant HTML
Obriu el fitxer index.html fitxer i enganxar el codi següent:
Digital Clock Using JavaScript
Aquí, un div es crea amb un fitxer identificador de rellotge digital . Aquest div s’utilitza per mostrar el rellotge digital mitjançant JavaScript. styles.css és una pàgina CSS externa i està enllaçada a la pàgina HTML mitjançant un fitxer etiqueta. De la mateixa manera, script.js és una pàgina JS externa i està enllaçada a la pàgina HTML mitjançant < script> etiqueta.
Addició de funcionalitat al rellotge digital mitjançant JavaScript
Obriu el fitxer script.js fitxer i enganxar el codi següent:
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ó del codi JavaScript
El Temps() i update () Les funcions s’utilitzen per afegir funcionalitats al rellotge digital.
Obtenir els elements temporals actuals
Per obtenir la data i hora actuals, heu de crear un objecte Date. Aquesta és la sintaxi per crear un objecte Date a JavaScript:
var date = new Date();La data i l 'hora actuals s'emmagatzemaran a data variable. Ara cal extreure l’hora, el minut i el segon actuals de l’objecte de data.
date.getHours () , date.getMinutes (), i date.getSeconds () s’utilitzen per obtenir l’hora, el minut i el segon actuals respectivament de l’objecte de data. Tots els elements temporals s’emmagatzemen en variables separades per a operacions posteriors.
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();Assignació del migdia actual (AM / PM)
Com que el rellotge digital té un format de 12 hores, cal assignar el meridiem adequat segons l’hora actual. Si l’hora actual és superior o igual a 12, el meridiem és PM (Post Meridiem) en cas contrari, és AM (Ante Meridiem).
var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}Conversió de l’hora actual en format de 12 hores
Ara heu de convertir l’hora actual en un format de 12 hores. Si l’hora actual és 0, l’hora actual s’actualitza a 12 (segons el format de 12 hores). A més, si l’hora actual és superior a 12, es redueix en 12 per mantenir-la alineada amb el format d’hora de 12 hores.
Relacionat: Com desactivar la selecció de text, retallar, copiar, enganxar i fer clic amb el botó dret en una pàgina web
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}Actualització dels elements temporals
Heu d'actualitzar els elements temporals si són inferiors a 10 (d'un dígit). El 0 s'afegeix a tots els elements de temps d'un dígit (hora, minut, segon).
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}Afegint els elements temporals al DOM
En primer lloc, s’accedeix al DOM mitjançant l’identificador de div de destinació ( rellotge digital ). A continuació, els elements de temps s'assignen al div mitjançant el fitxer text intern setter.
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;Actualització del rellotge cada segon
El rellotge s'actualitza cada segon mitjançant el fitxer setTimeout () mètode en JavaScript.
setTimeout(Time, 1000);Dissenyar el rellotge digital mitjançant CSS
Obriu el fitxer styles.css fitxer i enganxar el codi següent:
Relacionat: Com utilitzar CSS box-shadow: trucs i exemples
/* 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 s’utilitza per donar estil al rellotge digital. Aquí, el tipus de lletra Open Sans Condensed s’utilitza per mostrar el text del rellotge. S'importa de fonts de Google mitjançant @import . El # rellotge digital El selector d'identificador s'utilitza per seleccionar el div. El selector d'identificador utilitza el fitxer identificador atribut d'un element HTML per seleccionar un element específic.
Relacionat: Exemples simples de codis CSS que podeu aprendre en 10 minuts
Si voleu fer una ullada al codi font complet utilitzat en aquest article, aquí teniu el fitxer Dipòsit de GitHub . A més, si voleu fer un cop d'ull a la versió en viu d'aquest projecte, podeu consultar-la a través de Pàgines de GitHub .
Nota : El codi utilitzat en aquest article és Llicència MIT .
Desenvolupeu altres projectes de JavaScript
Si sou principiant de JavaScript i voleu ser un bon desenvolupador web, heu de construir bons projectes basats en JavaScript. Poden afegir valor al vostre currículum i a la vostra carrera professional.
Podeu provar alguns projectes com Calculadora, un joc de penjat, Tic Tac Toe, una aplicació meteorològica JavaScript, una pàgina de destinació interactiva, una eina de conversió de pes, tisores de paper de roca, etc.
com executar programes de Windows 95 a Windows 10
Si busqueu el vostre proper projecte basat en JavaScript, una calculadora senzilla és una opció excel·lent.
Compartir Compartir Tweet Correu electrònic Com construir una calculadora senzilla amb HTML, CSS i JavaScriptEl codi senzill i calculat és el camí a seguir quan es programa. Consulteu com construir la vostra pròpia calculadora en HTML, CSS i JS.
Llegiu a continuació Temes relacionats- Wordpress i desenvolupament web
- Programació
- HTML
- Desenvolupament web
- JavaScript
- CSS
Yuvraj és estudiant universitari en ciències de la computació a la Universitat de Delhi, Índia. És un apassionat del desenvolupament web Full Stack. Quan no escriu, explora la profunditat de les diferents tecnologies.
Més de Yuvraj ChandraSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us