Com construir un rellotge digital mitjançant JavaScript

Bloc

Com construir un rellotge digital mitjançant JavaScript

En aquest post, aprendreu a crear un rellotge digital en formats de 24 i 12 hores mitjançant JavaScript.

A la 24 hores format, l 'hora es mostra en forma de HH: MM: SS . A la 12 hores format, es mostra en forma de HH: MM: SS AM / PM .

webmail oh rr amb inici de sessió

Rellotge digital en format 24 hores

Consulteu el rellotge digital Pen a CodePen

Comencem per l'HTML.

L’estructura

Per començar, creeu un fitxer div amb identificador rellotge en què voleu mostrar l'hora. Inserirem l’hora en això div mitjançant JavaScript.

HTML

L’estilisme

L'estil del text que es mostrarà al fitxer div es defineix a la CSS.

El text té una mida i un color de lletra. La seva família de tipus de lletra es tria com a arbitrari perquè dóna l'aspecte d'un rellotge digital real. El cos té un color de fons fosc i el text està alineat al centre.

CSS

/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body { background-color: #121212; } #clock { font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 56px; text-align: center; padding-top: 40px; padding-bottom: 40px; }

El Scrypting

Ara ve la part principal. Tot el codi per al funcionament del rellotge s'escriu dins del fitxer currentTime () funció.

Dins d'aquesta funció, un objecte del fitxer Data Es crea la classe que us permet trucar a any, data, hora, minut, segon i mil·lisegon.

Al nostre codi, aquest objecte s’utilitza per obtenir les hores, minuts i segons actuals que s’emmagatzemen en diferents variables.

javascript prometeu preguntes d’entrevistes

JS

function currentTime() { var date = new Date(); /* creating object of Date class */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); }

Les hores, minuts i segons obtinguts es mostraran en un sol dígit si són inferiors a 10. Per exemple, l’hora actual es mostrarà com a 7 en lloc de 07 . Per mostrar sempre els elements del temps en format de dos dígits, a 0 s'afegeix davant d'ells sempre que siguin menors de 10 amb el fitxer updateTime () mètode.

JS

patrimoni net de la factura
function currentTime() { hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); } function updateTime(k) { if (k <10) { return '0' + k; } else { return k; } }

Ara, un cop preparat el nostre temps, mostrem-lo a div que vam fer abans. Això es fa obtenint el fitxer div utilitzant el document.getElementById i donar el nostre temps com a contingut del fitxer div utilitzant el HTML interior propietat.

JS

document.getElementById('clock').innerHTML = hour + ' : ' + min + ' : ' + sec; /* adding time to the div */

Per iniciar el temporitzador, setTimeout () s'utilitza un mètode que pren la funció currentTime () com a primer argument i el temps (en mil·lisegons) després del qual voleu anomenar la funció com a segon argument. En el nostre cas, la funció s’anomena cada 1000 mil·lisegons.

Finalment, el fitxer currentTime () La funció es diu per iniciar tot el procés.

JS

function currentTime() { var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */ } currentTime(); /* calling currentTime() function to initiate the process */

Per tant, enhorabona, acabeu de crear un rellotge digital.

# Rellotge digital en format de 12 hores

Consulteu el rellotge digital Pen a CodePen:

El format HTML i CSS del format de 12 hores es mantindrà igual que en el cas anterior.

L’estructura

Crea un div per mostrar l'hora tal com es va fer per al rellotge anterior.

HTML

L’estilisme

Estilitzeu el rellotge de la mateixa manera que es va fer amb el rellotge anterior.

CSS

caixa de tires react-native
/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body { background-color: #121212; } #clock { font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 56px; text-align: center; padding-top: 40px; padding-bottom: 40px; }

El Scrypting

El codi JavaScript tindrà algunes línies addicionals a més del codi creat per al rellotge anterior. A continuació es mostra el codi del rellotge digital en format de 24 hores.

JS

function currentTime() { var date = new Date(); /* creating object of Date class */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById('clock').innerText = hour + ' : ' + min + ' : ' + sec; /* adding time to the div */ var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */ } function updateTime(k) { if (k <10) { return '0' + k; } else { return k; } } currentTime(); /* calling currentTime() function to initiate the process */

Ara hem d’afegir només tres línies de codi més i el nostre rellotge estarà llest.

Una variable anomenada migdia es crea un valor inicial de AM se li assigna. Aquesta variable s'utilitzarà per emmagatzemar AM o bé PM .

A més, s'utilitza un operador ternari per donar el valor PM a la variable _midday_if el nombre d'hores és superior o igual a 12 i AM d'una altra manera.

JS

com comprar digibyte
function currentTime() { var midday = 'AM'; midday = (hour >= 12) ? 'PM' : 'AM'; }

Per tal de mostrar l'hora en format de 12 hores, el nombre d'hores no ha de ser superior a 12. Per tant, es dedueix 12 del nombre d'hores si és superior a 12.

A més, el format de 24 hores 00: 01: 23 a mitjanit s'ha de mostrar com a 12: 01: 23 AM en el format de 12 hores. Per a això, el nombre d'hores 00 és substituït per 12 .

JS

function currentTime() { hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); }

#javascript #webdev

www.youtube.com

Com construir un rellotge digital mitjançant JavaScript

En aquest JavaScript, aprendreu a crear un rellotge digital en formats de 24 i 12 hores mitjançant JavaScript.