Как да създадете цифров часовник с помощта на HTML, CSS и JavaScript

Цифровият часовник е сред най-добрите проекти за начинаещи в JavaScript. Това е доста лесно да се научи за хора от всякакво ниво на умения.

В тази статия ще научите как да създадете собствен цифров часовник с помощта на HTML, CSS и JavaScript. Ще получите практически опит с различни концепции на JavaScript, като създаване на променливи, използване на функции, работа с дати, достъп и добавяне на свойства към DOM и др.

Да започваме.

Компоненти на цифровия часовник

Цифровият часовник има четири части: час, минута, секунда и меридием.

Структура на папките на проекта за цифров часовник

Създайте основна папка, която съдържа HTML, CSS и JavaScript файлове. Можете да наименувате файловете, както искате. Тук се именува основната папка Дигитален часовник. Според стандартната конвенция за именуване се именуват HTML, CSS и JavaScript файлове index.html, стилове.css, и script.js съответно.

Добавяне на структура към цифровия часовник с помощта на HTML

Отвори index.html файл и поставете следния код:

Ето, а div се създава с документ за самоличност на дигитален часовник. Този div се използва за показване на цифровия часовник с помощта на JavaScript. стилове.css е външна CSS страница и е свързана към HTML страницата с помощта на етикет. По същия начин, script.js е външна JS страница и е свързана към HTML страницата с помощта на <скрипт> етикет.

Добавяне на функционалност към цифровия часовник с помощта на JavaScript

Отвори script.js файл и поставете следния код:

функция Време () {
// Създаване на обект от класа Date
var дата = нова дата ();
// Вземете текущия час
var час = date.getHours ();
// Вземете текущата минута
var minute = date.getMinutes ();
// Вземете текущата секунда
var second = date.getSeconds ();
// Променлива за съхранение AM / PM
var период = "";
// Присвояване на AM / PM според текущия час
ако (час> = 12) {
период = "PM";
} друго {
период = "AM";
}
// Преобразуване на часа в 12-часов формат
ако (час == 0) {
час = 12;
} друго {
ако (час> 12) {
час = час - 12;
}
}
// Актуализиране на час, минута и секунда
// ако са по-малки от 10
час = актуализация (час);
минута = актуализация (минута);
втора = актуализация (втора);
// Добавяне на времеви елементи към div
document.getElementById ("цифров часовник"). innerText = час + ":" + минута + ":" + секунда + "" + период;
// Задаване на таймера на 1 сек (1000 ms)
setTimeout (Време, 1000);
}
// Функция за актуализиране на времеви елементи, ако те са по-малки от 10
// Добавяме 0 преди времевите елементи, ако те са по-малки от 10
актуализация на функцията (t) {
ако (t <10) {
връщане "0" + t;
}
друго {
връщане t;
}
}
Време ();

Разбиране на JavaScript кода

The Време () и актуализация () функциите се използват за добавяне на функционалност към цифровия часовник.

Получаване на текущите елементи на времето

За да получите текущата дата и час, трябва да създадете обект Date. Това е синтаксисът за създаване на обект Date в JavaScript:

var дата = нова дата ();

Текущата дата и час ще се съхраняват в дата променлива. Сега трябва да извлечете текущия час, минута и секунда от обекта за дата.

date.getHours (), date.getMinutes (), и date.getSeconds () се използват за получаване на текущия час, минута и секунда съответно от обекта за дата. Всички елементи от времето се съхраняват в отделни променливи за по-нататъшни операции.

var час = date.getHours ();
var minute = date.getMinutes ();
var second = date.getSeconds ();

Присвояване на текущия меридием (AM / PM)

Тъй като цифровият часовник е в 12-часов формат, трябва да зададете подходящия меридием според текущия час. Ако текущият час е по-голям или равен на 12, тогава меридиемът е PM (Post Meridiem), в противен случай е AM (Ante Meridiem).

var период = "";
ако (час> = 12) {
период = "PM";
} друго {
период = "AM";
}

Преобразуване на текущия час в 12-часов формат

Сега трябва да конвертирате текущия час в 12-часов формат. Ако текущият час е 0, тогава текущият час се актуализира до 12 (според 12-часовия формат). Също така, ако текущият час е по-голям от 12, той се намалява с 12, за да се поддържа в съответствие с 12-часовия формат на времето.

Свързани: Как да деактивирам избора на текст, изрязването, копирането, поставянето и щракването с десния бутон върху уеб страница

ако (час == 0) {
час = 12;
} друго {
ако (час> 12) {
час = час - 12;
}
}

Актуализиране на времевите елементи

Трябва да актуализирате времевите елементи, ако те са по-малки от 10 (едноцифрени). 0 се добавя към всички едноцифрени елементи на времето (час, минута, секунда).

час = актуализация (час);
минута = актуализация (минута);
втора = актуализация (втора);
актуализация на функцията (t) {
ако (t <10) {
връщане "0" + t;
}
друго {
връщане t;
}
}

Добавяне на времевите елементи към DOM

Първо, до DOM се осъществява достъп чрез идентификатора на целевия div (дигитален часовник). След това времевите елементи се присвояват на div, като се използва вътрешенТекст сетер.

document.getElementById ("цифров часовник"). innerText = час + ":" + минута + ":" + секунда + "" + период;

Актуализиране на часовника всяка секунда

Часовникът се актуализира всяка секунда с помощта на setTimeout () метод в JavaScript.

setTimeout (Време, 1000);

Оформяне на цифров часовник с помощта на CSS

Отвори стилове.css файл и поставете следния код:

Свързани: Как да използвам CSS кутия-сянка: трикове и примери

/ * Импортиране на Open Sans Condensed Google шрифт * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#дигитален часовник {
фон-цвят: # 66ffff;
ширина: 35%;
марж: автоматично;
подложка: 50px;
подложка отдолу: 50px;
семейство шрифтове: 'Open Sans Condensed', sans-serif;
размер на шрифта: 64px;
подравняване на текст: център;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

Горният CSS се използва за оформяне на цифров часовник. Тук шрифтът Open Sans Condensed се използва за показване на текста на часовника. Импортира се от шрифтове на Google с помощта @import. The #дигитален часовник id селектор се използва за избор на целевия div. Селекторът на идентификатори използва документ за самоличност атрибут на HTML елемент за избор на конкретен елемент.

Свързани: Прости примери за CSS кодове, които можете да научите за 10 минути

Ако искате да разгледате пълния изходен код, използван в тази статия, ето Хранилище на GitHub. Освен това, ако искате да разгледате актуалната версия на този проект, можете да го проверите чрез Страници на GitHub.

Забележка: Кодът, използван в тази статия, е MIT лицензиран.

Разработване на други JavaScript проекти

Ако сте начинаещ в JavaScript и искате да бъдете добър уеб разработчик, трябва да създадете няколко добри базирани на JavaScript проекти. Те могат да добавят стойност към автобиографията ви, както и към кариерата ви.

Можете да изпробвате някои проекти като калкулатор, игра на палач, Tic Tac Toe, приложение за времето в JavaScript, интерактивна целева страница, инструмент за преобразуване на тежести, ножици за хартия и др.

Ако търсите следващия си проект, базиран на JavaScript, обикновен калкулатор е отличен избор.

Как да изградим прост калкулатор, използвайки HTML, CSS и JavaScript

Простият, изчислен код е начинът, по който трябва да се върви при програмиране. Вижте как да създадете свой собствен калкулатор в HTML, CSS и JS.

Прочетете Напред

За автора