Како створити дигитални сат помоћу ХТМЛ -а, ЦСС -а и ЈаваСцрипт -а

Како створити дигитални сат помоћу ХТМЛ -а, ЦСС -а и ЈаваСцрипт -а

Дигитални сат један је од најбољих пројеката за почетнике у ЈаваСцрипт -у. Лако је научити за људе било ког нивоа вештине.





У овом чланку ћете научити како да направите сопствени дигитални сат користећи ХТМЛ, ЦСС и ЈаваСцрипт. Добићете практично искуство са различитим ЈаваСцрипт концептима, попут стварања променљивих, коришћења функција, рада са датумима, приступа и додавања својстава у ДОМ и још много тога.



где могу бесплатно да одштампам нешто

Хајде да почнемо.



Компоненте дигиталног сата

Дигитални сат има четири дела: сат, минут, секунду и меридием.

Структура фасцикли пројекта Дигитални сат

Направите роот директоријум који садржи ХТМЛ, ЦСС и ЈаваСцрипт датотеке. Можете именовати датотеке како год желите. Овде се именује роот директоријум Дигитални сат . Према стандардној конвенцији именовања, ХТМЛ, ЦСС и ЈаваСцрипт датотеке се именују индек.хтмл , стилови.цсс , и сцрипт.јс редом.



Додавање структуре дигиталном сату помоћу ХТМЛ -а

Отвори индек.хтмл датотеку и залепите следећи код:





Digital Clock Using JavaScript






Овде див је креиран са ид оф дигитални сат . Овај див се користи за приказ дигиталног сата помоћу ЈаваСцрипт -а. стилови.цсс је спољна ЦСС страница и повезана је са ХТМЛ страницом помоћу таг. Слично, сцрипт.јс је спољна ЈС страница и повезана је са ХТМЛ страницом помоћу < скрипта> таг.



Додавање функционалности дигиталном сату помоћу ЈаваСцрипт -а

Отвори сцрипт.јс датотеку и залепите следећи код:

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

Разумевање ЈаваСцрипт кода

Тхе Време() и ажурирање() функције се користе за додавање функционалности дигиталном сату.



Добијање елемената тренутног времена

Да бисте добили тренутни датум и време, потребно је да креирате објекат Дате. Ово је синтакса за креирање објекта Дате у ЈаваСцрипт -у:

var date = new Date();

Тренутни датум и време биће сачувани у датум променљива. Сада морате да извучете тренутни сат, минут и секунду из објекта датума.

дате.гетХоурс () , дате.гетМинутес (), и дате.гетСецондс () користе се за добијање тренутног сата, минута и секунде од објекта датума. Сви временски елементи су ускладиштени у засебним променљивим за даље операције.

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

Одређивање тренутног поднева (АМ/ПМ)

Пошто је дигитални сат у 12-часовном формату, потребно је да доделите одговарајући меридием према тренутном сату. Ако је тренутни сат већи или једнак 12, тада је меридием ПМ (Пост Меридием), иначе је АМ (Анте Меридием).

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

Претварање тренутног сата у 12-часовни формат

Сада морате да конвертујете тренутни сат у 12-часовни формат. Ако је тренутни сат 0, тада се тренутни сат ажурира на 12 (према 12-часовном формату). Такође, ако је тренутни сат већи од 12, он се смањује за 12 да би био усклађен са 12-часовним форматом времена.

Повезан: Како онемогућити одабир текста, исецање, копирање, лепљење и десни клик на веб страници

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

Ажурирање временских елемената

Морате ажурирати временске елементе ако су мањи од 10 (једноцифрени). 0 се додаје свим једноцифреним временским елементима (сат, минут, секунда).

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

Додавање временских елемената у ДОМ

Прво, ДОМ -у се приступа помоћу ИД -а циљног див -а ( дигитални сат ). Затим се временски елементи додељују див -у помоћу иннерТект постављач.

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

Ажурирање сата сваке секунде

Сат се ажурира сваке секунде помоћу сетТимеоут () метод у ЈаваСцрипт -у.

setTimeout(Time, 1000);

Стилизовање дигиталног сата помоћу ЦСС -а

Отвори стилови.цсс датотеку и залепите следећи код:

Повезан: Како се користи ЦСС бок-схадов: трикови и примери

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

Горе наведени ЦСС се користи за обликовање дигиталног сата. Овде се Опен Санс Цонденсед фонт користи за приказ текста сата. Увезен је из Гоогле фонтова помоћу @увоз . Тхе #дигитални сат ид селектор се користи за избор циљног див. Бирач ИД -а користи ид атрибут ХТМЛ елемента за избор одређеног елемента.

Повезан: Једноставни примери ЦСС кода које можете научити за 10 минута

Ако желите да погледате комплетан изворни код коришћен у овом чланку, ево ГитХуб спремиште . Такође, ако желите да погледате живу верзију овог пројекта, можете то да проверите ГитХуб Пагес .

Белешка : Код који се користи у овом чланку је МИТ лиценциран .

Развијте друге ЈаваСцрипт пројекте

Ако сте почетник у ЈаваСцрипт-у и желите да будете добар веб програмер, морате да направите неке добре пројекте засноване на ЈаваСцрипт-у. Они могу додати вредност вашем животопису, као и вашој каријери.

Можете испробати неке пројекте као што су Калкулатор, игра Хангман, Тиц Тац Тое, ЈаваСцрипт временска апликација, интерактивна одредишна страница, алат за претварање тежине, маказе за папир итд.

овај рачунар нема омогућен вт-к/амд-в

Ако тражите свој следећи пројекат заснован на ЈаваСцрипт-у, једноставан калкулатор је одличан избор.

Објави Објави Твеет Емаил Како направити једноставан калкулатор користећи ХТМЛ, ЦСС и ЈаваСцрипт

Једноставан, прорачунати код је начин на који можете ићи при програмирању. Проверите како да направите сопствени калкулатор у ХТМЛ -у, ЦСС -у и ЈС -у.

Прочитајте следеће Повезане теме О аутору Иуврај Цхандра(Објављено 60 чланака)

Иуврај је студент основних студија рачунарства на Универзитету у Делхију у Индији. Он је страствен за Фулл Стацк Веб Девелопмент. Кад не пише, истражује дубину различитих технологија.

Још од Иуврај Цхандра

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили