Очень простые часы Javascript
Хотите добавить часы на свой сайт? Или просто изучаете таймеры в Javascript? Ну, вот действительно простой пример – читайте дальше!
JAVASCRIPT ЧАСЫ
Хорошо, давайте теперь более подробно рассмотрим, как работают часы Javascript.
ЧАСТЬ 1) HTML
Создаём файл index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Очень простые часы Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contaner">
<div id="clockWrap"></div>
</div>
<script src="js.js"></script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Очень простые часы Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contaner">
<div id="clockWrap"></div>
</div>
<script src="js.js"></script>
</body>
</html>
Да, это все. Старый добрый
контейнер для показа часов.
ЧАСТЬ 2) JAVASCRIPT
Создаём файл js.js
window.onload = () => {
// (A) Получить HTML <DIV ID="CLOCKWRAP">
let hClock = document.querySelector("#clockWrap");
// (B) ВСПОМОГАТЕЛЬНАЯ ФУНКЦИЯ ДЛЯ ПОДГОТОВКИ 0
let pzero = num => num < 10 ? "0" + num: num;
// (C) ЗАПУСК ТАЙМЕРА
let timer = setInterval(() => {
let now = new Date();
hClock.innerHTML = `${pzero(now.getHours())} : ${pzero(now.getMinutes())} : ${pzero(now.getSeconds())}`;
}, 1000);
};
// (A) Получить HTML <DIV ID="CLOCKWRAP">
let hClock = document.querySelector("#clockWrap");
// (B) ВСПОМОГАТЕЛЬНАЯ ФУНКЦИЯ ДЛЯ ПОДГОТОВКИ 0
let pzero = num => num < 10 ? "0" + num: num;
// (C) ЗАПУСК ТАЙМЕРА
let timer = setInterval(() => {
let now = new Date();
hClock.innerHTML = `${pzero(now.getHours())} : ${pzero(now.getMinutes())} : ${pzero(now.getSeconds())}`;
}, 1000);
};
A. Само собой разумеется, получить <div id="clockWrap">.
B. pzero(num)вспомогательная функция для добавления 0 перед числом, numесли оно меньше 10.
C. var timerнастроен на запуск каждую секунду.
• let now = new Date();Получить текущую дату/время.
• hClock.innerHTML = ...Переформатируйте текущее время и установите его в формате <div id="clockWrap">.
ЧАСТЬ 3) CSS
Создаём файл style.css
body {
/* фон для body */
background-color: black;
}
.contaner {
/* дадим размер нашему контенеру */
max-width: 1200px;
width: 100%;
height: 700px;
/* поставим наши часы по центру экрана */
display: flex;
justify-content: center;
align-items: center;
/* дадим внешний отступ */
margin: 0 auto;
}
#clockWrap {
/* FONT */
color: darkturquoise;
font-family: Arial, sans-serif;
font-size: 40px;
/* CENTER */
text-align: center;
}
/* фон для body */
background-color: black;
}
.contaner {
/* дадим размер нашему контенеру */
max-width: 1200px;
width: 100%;
height: 700px;
/* поставим наши часы по центру экрана */
display: flex;
justify-content: center;
align-items: center;
/* дадим внешний отступ */
margin: 0 auto;
}
#clockWrap {
/* FONT */
color: darkturquoise;
font-family: Arial, sans-serif;
font-size: 40px;
/* CENTER */
text-align: center;
}
В css думаю что всё понятно.
Можете посмотреть и скачать пример.
Посмотреть
Скачать
