Здравствуйте, посетители! Сегодня в этом блоге мы создадим цифровые часы на javascript, используя HTML, CSS и Javascript. В этом блоге я поделился проектами по примерам CSS-анимации, Javascript, веб-дизайну и т. д. Пожалуйста, не забудьте проверить их, если хотите. Ниже видео о том, как будут выглядеть часы JavaScript или часы JS в конце кодирования.

Надеюсь, вы посмотрели демо и получили некоторое представление о проекте. Теперь в этом фрагменте мы создадим цифровые часы в 24-часовом формате, и они будут отображаться в формате ЧЧ:ММ:СС. Начнем с HTML-части проекта. Во-первых, мы возьмем тег p с идентификатором «часы». Мы будем использовать тег p для вставки времени с помощью пользовательского кода javascript.

Вам может понравиться это:

Давайте начнем с CSS-части проекта. Тексту присваивается размер шрифта и цвет градиента. Его семейство шрифтов выбрано как Montserrat. Чтобы сделать текст толще, я присвоил ему размер шрифта 500. Я использовал черный цвет в качестве фона фрагмента. Вы можете использовать любой цвет по вашему выбору. Я исключил ширину и высоту проекта по умолчанию, установив поля и отступы равными нулю. Чтобы «часы» идеально выровнялись посередине, я использовал свойство display grid. После этого я установил «элементы места: центр» и высоту 100vh. Таким образом, часы автоматически выровняются по центру окна просмотра.

В части javascript, во-первых, мы взяли функцию customClock(). В этом проекте мы пытались получить текущие часы, минуты и секунды, которые хранятся в разных переменных. Цифра часов будет отображаться одной цифрой, если число меньше 10. На мгновение, если число минут 6, оно будет отображаться как 6 вместо 06. После того, как функция «customClock» готова, мы отобразит время внутри тега p, который мы создали ранее. Мы можем сделать это, получив идентификатор «часов» с помощью метода document.getElementById и указав наше время в качестве содержимого div с помощью свойства innerHTML.

Скачать исходный код