Простые часы на JavaScript можно создать с использованием HTML, CSS и JavaScript. Давайте создадим пример простых часов с использованием текущего времени в браузере.
Простые часы на JavaScript можно создать с использованием HTML, CSS и JavaScript. Давайте создадим пример простых часов с использованием текущего времени в браузере.
- HTML:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Простые Часы</title>
</head> <body>
<div class="clock"> <div class="time" id="time"></div> </div>
<script src="script.js"></script> </body> </html>
- CSS (styles.css):
codebody {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.clock {
font-family: 'Arial', sans-serif;
font-size: 2em;
text-align: center;
}
.time {
border: 2px solid #333;
padding: 10px;
border-radius: 5px;
}
- JavaScript (script.js):
javascriptCopy codefunction updateTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById('time').innerText = timeString;
}
// Обновление времени каждую секунду setInterval(updateTime, 1000);
// Инициализация времени при загрузке страницы updateTime();
Этот код создает простые часы, отображая текущее время в формате "часы:минуты:секунды". Функция updateTime получает текущее время, форматирует его и обновляет текст в элементе с идентификатором "time". setInterval используется для обновления времени каждую секунду.
Просто создайте файлы с расширениями .html, .css, и .js, скопируйте соответствующий код в каждый файл, а затем откройте HTML-файл в вашем веб-браузере. Вы увидите простые часы, которые обновляются в реальном времени.