Как сделать цифровые часы на JavaScript
Создание проекта цифровых часов на JavaScript — один из лучших способов изучения JavaScript. Итак, сегодня давайте создадим JavaScript для цифровых часов. Для создания этого проекта нам понадобится HTML, CSS, Javascript.
В современную цифровую эпоху знание того, как создать цифровые часы с помощью JavaScript, является ценным навыком для веб-разработчиков. Хотите ли вы отображать текущее время на своем веб-сайте или создать собственное приложение для часов, JavaScript предоставляет необходимые инструменты для этого. В этом уроке мы покажем вам процесс создания простых цифровых часов с использованием HTML, CSS и JavaScript.
Предварительные требования для JavaScript цифровых часов
Прежде чем мы углубимся в код, убедитесь, что у вас есть следующее:
Базовые знания HTML, CSS и JavaScript.
Редактор кода (например, Visual Studio Code, Sublime Text).
Веб-браузер для проверки ваших цифровых часов.
Структура папок проекта
Давайте рассмотрим структуру папок проекта. Папка проекта состоит из 3 файлов. HTML-файл создает элементы, необходимые для построения структуры и макета нашего проекта. Затем файл CSS стилизует элементы, которые мы создали с помощью CSS, и, наконец, JavaScript добавляет функциональность нашему проекту.
HTML
Начнем с HTML-кода. Скопируйте приведенный ниже код и вставьте его в свой HTML-документ. Здесь мы создаем элемент div с классом clock, а внутри него — элементы управления для отображения часов, минут и секунд. Помимо этого, мы также используем теги span для отображения : между элементами div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock">
<div id="hour"></div>
<span>:</span>
<div id="minute"></div>
<span>:</span>
<div id="seconds"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>Далее мы стилизуем нашу игру с помощью CSS. Для этого скопируйте код, предоставленный вам ниже, и вставьте его в свою таблицу стилей.
Мы предоставляем цвет фона для body, а время отображается на белом фоне. Каждый элемент правильно выровнен и слегка изогнут, чтобы он выглядел хорошо.
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background-image: linear-gradient(135deg, #8052ec, #d161ff);
}
.clock {
width: 31.25em;
height: 8em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.clock div {
position: relative;
background-color: #ffffff;
height: 100%;
width: 3.2em;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
color: #150c41;
border-radius: 0.4em;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.3);
letter-spacing: 0.05em;
}
.clock span {
font-weight: 800;
font-size: 2.5em;
color: #ffffff;
}
JavaScript
Наконец, мы добавляем функциональность с помощью Javascript. Еще раз скопируйте приведенный ниже код и вставьте его в файл сценария.
Мы создаем переменную clock, в которой вызываем функцию time. Эта функция обновляет время каждую секунду, получая текущее время с помощью объекта JavaScript Date(). Затем часы, минуты и секунды извлекаются из даты и форматируются с использованием ведущих нулей с помощью функции padStart(). Затем отформатированное время отображается на веб-странице в виде hour, minute и seconds.
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const seconds = document.getElementById("seconds");
const clock = setInterval(function time() {
const dateNow = new Date();
let hr = dateNow.getHours();
let min = dateNow.getMinutes();
let sec = dateNow.getSeconds();
hr = hr.toString().padStart(2, "0");
min = min.toString().padStart(2, "0");
sec = sec.toString().padStart(2, "0");
const timeString = $ {
hr
}: $ {
min
}: $ {
sec
};
hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;
}, 1000);Вы можете сократить JS всего до нескольких строк:
const parts = [...document.querySelectorAll('#hour,#minute,#seconds')]
setInterval(() => {
new Date().toTimeString().split(' ')[0].split(':').forEach( (part, i) => parts[i].textContent = part)
}, 1000)
