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

Digital Clock - один из лучших проектов на JavaScript для начинающих. Этому довольно легко научиться людям любого уровня подготовки.

В этой статье вы узнаете, как создать собственные цифровые часы с помощью HTML, CSS и JavaScript. Вы получите практический опыт работы с различными концепциями JavaScript, такими как создание переменных, использование функций, работа с датами, доступ и добавление свойств в DOM и многое другое.

Давайте начнем.

Компоненты цифровых часов

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

Структура папок проекта Digital Clock

Создайте корневую папку, содержащую файлы HTML, CSS и JavaScript. Вы можете называть файлы как хотите. Здесь корневая папка названа Цифровые часы. В соответствии со стандартным соглашением об именах файлы HTML, CSS и JavaScript называются index.html, styles.css, а также script.js соответственно.

Добавление структуры к цифровым часам с помощью HTML

Открой index.html файл и вставьте следующий код:

Здесь div создается с я бы из цифровые часы. Этот div используется для отображения цифровых часов с помощью JavaScript. styles.css является внешней страницей CSS и связана с HTML-страницей с помощью тег. По аналогии, script.js является внешней JS-страницей и связана с HTML-страницей с помощью <сценарий> тег.

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

Открой script.js файл и вставьте следующий код:

function Time () {
// Создание объекта класса Date
var date = новая дата ();
// Получить текущий час
var hour = date.getHours ();
// Получаем текущую минуту
var minute = date.getMinutes ();
// Получить текущую секунду
var second = date.getSeconds ();
// Переменная для хранения AM / PM
var period = "";
// Назначение AM / PM по текущему часу
if (hour> = 12) {
period = "PM";
} еще {
период = "AM";
}
// Преобразование часа в 12-часовой формат
if (hour == 0) {
час = 12;
} еще {
if (hour> 12) {
час = час - 12;
}
}
// Обновление часа, минуты и секунды
// если они меньше 10
час = обновление (час);
минута = обновление (минута);
второй = обновление (второе);
// Добавляем элементы времени в div
document.getElementById ("цифровые часы"). innerText = час + ":" + минута + ":" + секунда + "" + период;
// Устанавливаем таймер на 1 секунду (1000 мс)
setTimeout (Время, 1000);
}
// Функция для обновления элементов времени, если они меньше 10
// Добавляем 0 перед элементами времени, если они меньше 10
function update (t) {
if (t <10) {
вернуть «0» + t;
}
еще {
return t;
}
}
Время();

Понимание кода JavaScript

В Время() а также Обновить() функции используются для добавления функциональности цифровым часам.

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

Чтобы получить текущую дату и время, вам необходимо создать объект Date. Это синтаксис для создания объекта Date в JavaScript:

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

Текущая дата и время будут сохранены в Дата Переменная. Теперь вам нужно извлечь текущий час, минуту и ​​секунду из объекта даты.

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

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

Назначение текущего меридиема (AM / PM)

Поскольку цифровые часы имеют 12-часовой формат, вам необходимо назначить соответствующий меридием в соответствии с текущим часом. Если текущий час больше или равен 12, то меридием является PM (Post Meridiem), в противном случае - AM (Ante Meridiem).

var period = "";
if (hour> = 12) {
period = "PM";
} еще {
период = "AM";
}

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

Теперь вам нужно преобразовать текущий час в 12-часовой формат. Если текущий час равен 0, то текущий час обновляется до 12 (в соответствии с 12-часовым форматом). Кроме того, если текущий час больше 12, он уменьшается на 12, чтобы соответствовать 12-часовому формату времени.

Связанный: Как отключить выделение текста, вырезать, копировать, вставить и щелкнуть правой кнопкой мыши на веб-странице

if (hour == 0) {
час = 12;
} еще {
if (hour> 12) {
час = час - 12;
}
}

Обновление элементов времени

Вам необходимо обновить элементы времени, если они меньше 10 (однозначные). 0 добавляется ко всем однозначным элементам времени (час, минута, секунда).

час = обновление (час);
минута = обновление (минута);
второй = обновление (второе);
function update (t) {
if (t <10) {
вернуть «0» + t;
}
еще {
return t;
}
}

Добавление элементов времени в DOM

Во-первых, доступ к DOM осуществляется с помощью идентификатора целевого div (цифровые часы). Затем элементы времени присваиваются div с помощью innerText сеттер.

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

Обновление часов каждую секунду

Часы обновляются каждую секунду с помощью setTimeout () метод в JavaScript.

setTimeout (Время, 1000);

Стилизация цифровых часов с помощью CSS

Открой styles.css файл и вставьте следующий код:

Связанный: Как использовать CSS box-shadow: хитрости и примеры

/ * Импорт шрифта Open Sans Condensed Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#цифровые часы {
цвет фона: # 66ffff;
ширина: 35%;
маржа: авто;
padding-top: 50 пикселей;
padding-bottom: 50 пикселей;
семейство шрифтов: «Open Sans Condensed», без засечек;
размер шрифта: 64 пикселей;
выравнивание текста: центр;
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 с использованием @Импортировать. В #цифровые часы Селектор id используется для выбора целевого div. Селектор id использует я бы атрибут HTML-элемента, чтобы выбрать конкретный элемент.

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

Если вы хотите взглянуть на полный исходный код, использованный в этой статье, вот Репозиторий GitHub. Кроме того, если вы хотите взглянуть на живую версию этого проекта, вы можете проверить ее через Страницы GitHub.

Примечание: Код, используемый в этой статье, Лицензия MIT.

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

Если вы новичок в JavaScript и хотите стать хорошим веб-разработчиком, вам нужно создать несколько хороших проектов на основе JavaScript. Они могут повысить ценность вашего резюме, а также вашей карьеры.

Вы можете опробовать некоторые проекты, такие как «Калькулятор», «Палач», «Крестики-нолики», погодное приложение на JavaScript, интерактивную целевую страницу, инструмент для преобразования веса, «Каменные ножницы» и т. Д.

Если вы ищете свой следующий проект на основе JavaScript, простой калькулятор - отличный выбор.

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

Простой расчетный код - это лучший способ программирования. Узнайте, как создать свой собственный калькулятор на HTML, CSS и JS.

Читать далее

Об авторе