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

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

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





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



как мне войти в сеть playstation

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





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

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

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

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



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

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





Digital Clock Using JavaScript






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



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

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

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

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

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



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

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

var date = new 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';
} 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;
}
}

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

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

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

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

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

setTimeout(Time, 1000);

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

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

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

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

Приведенный выше CSS используется для стилизации цифровых часов. Здесь шрифт Open Sans Condensed используется для отображения текста часов. Он импортирован из шрифтов Google с использованием @Импортировать . В #цифровые часы Селектор id используется для выбора целевого div. Селектор id использует я бы атрибут HTML-элемента, чтобы выбрать конкретный элемент.

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

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

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

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

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

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

как слить воду из порта зарядки iphone

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

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

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

Читать далее Похожие темы Об авторе Юврадж Чандра(Опубликовано 60 статей)

Юврадж - студент бакалавриата по информатике в Университете Дели, Индия. Он увлечен веб-разработкой Full Stack. Когда он не пишет, он исследует глубину различных технологий.

Ещё от Yuvraj Chandra

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться