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

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

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

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

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

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

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

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

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

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

Овде

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

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

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

функција Време () {
// Креирање објекта класе Дате
вар датум = нови датум ();
// Добијање тренутног сата
вар сат = дате.гетХоурс ();
// Добијање тренутног минута
вар минуте = дате.гетМинутес ();
// Набавите тренутну секунду
вар сецонд = дате.гетСецондс ();
// Променљива за чување АМ / ПМ
вар период = "";
// Додељивање АМ / ПМ према тренутном сату
ако (сат> = 12) {
период = "ПМ";
} остало {
период = "АМ";
}
// Претварање сата у 12-часовни формат
ако (сат == 0) {
сат = 12;
} остало {
иф (сат> 12) {
сат = сат - 12;
}
}
// Ажурирање сата, минута и секунде
// ако су мање од 10
сат = ажурирање (сат);
минут = ажурирање (минут);
друго = ажурирање (друго);
// Додавање временских елемената у див
доцумент.гетЕлементБиИд ("дигитални сат"). иннерТект = хоур + ":" + минуте + ":" + секунда + "" + период;
// Подеси тајмер на 1 секунду (1000 мс)
сетТимеоут (Време, 1000);
}
// Функција за ажурирање временских елемената ако су они мањи од 10
// Додајте 0 пре временских елемената ако су мањи од 10
ажурирање функције (т) {
ако је (т <10) {
повратак "0" + т;
}
елсе {
ретурн т;
}
}
Време();

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

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

Добијање тренутних временских елемената

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

вар датум = нови датум ();

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

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

вар сат = дате.гетХоурс ();
вар минуте = дате.гетМинутес ();
вар сецонд = дате.гетСецондс ();

Додељивање тренутног меридијема (АМ / ПМ)

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

вар период = "";
ако (сат> = 12) {
период = "ПМ";
} остало {
период = "АМ";
}

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

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

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

ако (сат == 0) {
сат = 12;
} остало {
иф (сат> 12) {
сат = сат - 12;
}
}

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

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

сат = ажурирање (сат);
минут = ажурирање (минут);
друго = ажурирање (друго);
ажурирање функције (т) {
ако је (т <10) {
повратак "0" + т;
}
елсе {
ретурн т;
}
}

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

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

доцумент.гетЕлементБиИд ("дигитални сат"). иннерТект = хоур + ":" + минуте + ":" + секунда + "" + период;

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

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

сетТимеоут (Време, 1000);

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

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

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

/ * Увоз фонтова Опен Санс Цонденсед Гоогле * /
@импорт урл (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: вгхт @ 300 & дисплаи = свап ');
#дигитални сат {
бацкгроунд-цолор: # 66фффф;
ширина: 35%;
маржа: ауто;
облога: 50пк;
доњи део: 50пк;
породица фонтова: 'Опен Санс Цонденсед', санс-сериф;
величина фонта: 64пк;
поравнање текста: центар;
бок-схадов: 0 4пк 8пк 0 ргба (0, 0, 0, 0.2), 0 6пк 20пк 0 ргба (0, 0, 0, 0.19);
}

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

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

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

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

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

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

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

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

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

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

Прочитајте следеће

О аутору