Paano Lumikha ng isang Digital Clock Gamit ang HTML, CSS, at JavaScript

Paano Lumikha ng isang Digital Clock Gamit ang HTML, CSS, at JavaScript

Ang Digital Clock ay kabilang sa mga pinakamahusay na proyekto ng nagsisimula sa JavaScript. Medyo madali itong matutunan para sa mga tao ng anumang antas ng kasanayan.





Sa artikulong ito, malalaman mo kung paano bumuo ng iyong sariling digital na orasan gamit ang HTML, CSS, at JavaScript. Makakakuha ka ng karanasan sa karanasan ng iba't ibang mga konsepto ng JavaScript tulad ng paglikha ng mga variable, paggamit ng mga pag-andar, pakikipagtulungan sa mga petsa, pag-access at pagdaragdag ng mga pag-aari sa DOM, at higit pa.



paano ko mababago ang aking default na google account sa chrome

Magsimula na tayo.





Mga Bahagi ng Digital Clock

Ang digital na orasan ay may apat na bahagi: oras, minuto, segundo, at meridiem.

Istraktura ng Folder ng Digital Clock Project

Lumikha ng isang root folder na naglalaman ng mga HTML, CSS, at JavaScript file. Maaari mong pangalanan ang mga file ng anumang nais mo. Dito pinangalanan ang root folder Digital na orasan . Ayon sa pamantayang kombensyon sa pagpapangalan, ang mga HTML, CSS, at JavaScript file ay pinangalanan index.html , mga istilo.css , at script.js ayon sa pagkakabanggit.



Pagdaragdag ng Istraktura sa Digital Clock Gamit ang HTML

Buksan ang index.html file at i-paste ang sumusunod na code:





Digital Clock Using JavaScript






Heto div ay nilikha gamit ang isang id ng digital na orasan . Ginagamit ang div na ito upang ipakita ang digital na orasan gamit ang JavaScript. mga istilo.css ay isang panlabas na pahina ng CSS at naka-link sa pahina ng HTML gamit ang a tag Katulad din script.js ay isang panlabas na pahina ng JS at naka-link sa pahina ng HTML gamit ang < script> tag



Pagdaragdag ng Pag-andar sa Digital Clock Gamit ang JavaScript

Buksan ang script.js file at i-paste ang sumusunod na code:

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();

Pag-unawa sa JavaScript Code

Ang Oras () at update () ginagamit ang mga pagpapaandar upang magdagdag ng pag-andar sa Digital Clock.



Pagkuha ng Kasalukuyang Mga Elemento ng Oras

Upang makuha ang kasalukuyang petsa at oras, kailangan mong lumikha ng isang object ng Petsa. Ito ang syntax para sa paglikha ng isang bagay na Petsa sa JavaScript:

var date = new Date();

Ang kasalukuyang petsa at oras ay itatabi sa petsa variable. Ngayon kailangan mong kunin ang kasalukuyang oras, minuto, at pangalawa mula sa object ng petsa.

date.getHours () , date.getMinutes (), at date.getSeconds () ay ginagamit upang makuha ang kasalukuyang oras, minuto, at pangalawa ayon sa pagkakasunud-sunod ng object ng petsa. Ang lahat ng mga elemento ng oras ay nakaimbak sa magkakahiwalay na mga variable para sa karagdagang pagpapatakbo.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Pagtatalaga sa Kasalukuyang Tanghali (AM / PM)

Dahil ang Digital Clock ay nasa isang 12 oras na format, kailangan mong italaga ang naaangkop na meridiem ayon sa kasalukuyang oras. Kung ang kasalukuyang oras ay mas malaki kaysa sa o katumbas ng 12, kung gayon ang meridiem ay PM (Post Meridiem) kung hindi man, ito ay AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Pag-convert ng Kasalukuyang Oras sa Format na 12-Oras

Ngayon ay kailangan mong i-convert ang kasalukuyang oras sa isang 12-oras na format. Kung ang kasalukuyang oras ay 0, pagkatapos ang kasalukuyang oras ay na-update sa 12 (ayon sa format na 12-oras). Gayundin, kung ang kasalukuyang oras ay mas malaki sa 12, nabawasan ito ng 12 upang mapanatili itong nakahanay sa 12-oras na format ng oras.

Kaugnay: Paano Huwag paganahin ang Pagpili ng Teksto, Gupitin, Kopyahin, I-paste, at Pag-right click sa isang Web Page

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Pag-update ng Mga Elemento ng Oras

Kailangan mong i-update ang mga elemento ng oras kung mas mababa sa 10 (Single-Digit). Ang 0 ay naidugtong sa lahat ng mga elemento ng solong digit na oras (oras, minuto, segundo).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Pagdaragdag ng Mga Elemento ng Oras sa DOM

Una, na-access ang DOM gamit ang target div's id ( digital na orasan ). Pagkatapos ang mga elemento ng oras ay nakatalaga sa div gamit ang panloob na Text setter

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Ina-update ang Clock Every Second

Ang orasan ay ina-update bawat segundo gamit ang setTimeout () pamamaraan sa JavaScript.

setTimeout(Time, 1000);

Pag-istilo ng Digital Clock Gamit ang CSS

Buksan ang mga istilo.css file at i-paste ang sumusunod na code:

Kaugnay: Paano Gumamit ng CSS box-shadow: Mga Trick at Halimbawa

/* 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);
}

Ang nabanggit na CSS ay ginagamit upang mai-istilo ang Digital Clock. Dito, ang font ng Open Sans CondENS ay ginagamit upang ipakita ang teksto ng orasan. Na-import ito mula sa mga font ng Google gamit ang @angkat . Ang #digital na orasan Ginagamit ang tagapili ng id upang piliin ang target na div. Ginagamit ng tagapili ng id ang id katangian ng isang elemento ng HTML upang pumili ng isang tukoy na elemento.

Kaugnay: Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

Kung nais mong tingnan ang kumpletong source code na ginamit sa artikulong ito, narito ang Repository ng GitHub . Gayundin, kung nais mong tingnan ang live na bersyon ng proyektong ito, maaari mo itong suriin Mga Pahina ng GitHub .

Tandaan : Ang code na ginamit sa artikulong ito ay Lisensyado ang MIT .

Bumuo ng Iba Pang Mga Proyekto sa JavaScript

Kung ikaw ay isang nagsisimula sa JavaScript at nais na maging isang mahusay na developer ng web, kailangan mong bumuo ng ilang mga magagandang proyekto na nakabatay sa JavaScript. Maaari silang magdagdag ng halaga sa iyong resume pati na rin ang iyong karera.

Maaari mong subukan ang ilang mga proyekto tulad ng Calculator, isang laro ng Hangman, Tic Tac Toe, isang JavaScript app ng panahon, isang interactive na landing page, isang Tool ng Pagbabago ng Timbang, Mga Gunting ng Rock Paper, atbp.

panlabas na drive na hindi nagpapakita ng windows 10

Kung naghahanap ka para sa iyong susunod na proyekto na nakabatay sa JavaScript, ang isang simpleng calculator ay isang mahusay na pagpipilian.

Magbahagi Magbahagi Mag-tweet Email Paano Bumuo ng isang Simpleng Calculator Gamit ang HTML, CSS, at JavaScript

Simple, kinakalkula ang code ay ang paraan upang pumunta kapag nag-program. Suriin kung paano bumuo ng iyong sariling calculator sa HTML, CSS, at JS.

Basahin Susunod Mga Kaugnay na Paksa Tungkol sa May-akda Yuvraj Chandra(60 Mga Artikulo Na-publish)

Si Yuvraj ay isang undergraduate na mag-aaral sa Computer Science sa University of Delhi, India. Masigasig siya sa Full Stack Web Development. Kapag hindi siya nagsusulat, sinisiyasat niya ang lalim ng iba't ibang mga teknolohiya.

Higit pa Mula kay Yuvraj Chandra

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe