Проект 2. Часы на JavaScript
Html разметка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clock"></div>
</body>
</html>
Разметка стандартная.
Единственный блок с id="clock"
И скрипт, подключающийся в шапке, потому что без него в этом блоке нет смысла
JS код
function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout("clock()", 1000);
}
clock();
Разбираем код построчно
var date = new Date(); // создаём объект new Date(), отображающий локальное время, присваиваем его переменной date
var hours = date.getHours(); // получаем часы текущей даты, присваиваем их переменной hours
аналогично с минутами и секундами
if (hours < 10) hours = "0" + hours; // если часов меньше 10, дописываем вначале 0 для красоты вывода
аналогично с минутами и секундами
document.getElementById("clock").innerHTML... // находим блок с id="clock" и внутри него отображаем время
setTimeout("clock()", 1000); // обновляем нашу функцию каждые 1000 мс, т.е каждую секунду
про setTimeout можно почитать здесь https://learn.javascript.ru/settimeout-setinterval
clock(); // вызов функции
Аналогичный код предложен здесь: https://myrusakov.ru/javascript-digital-watch.html
Но в нём вместо вызова функции отдельной строкой используют конструкцию
body onload="clock()"
Часы работают. Сделаем ещё одну строку, которая показывает дату и день недели.
Для этого в разметку добавим ещё один div с id="date", а в js-код допишем строки:
var options = {
month: 'long',
day: 'numeric',
weekday: 'long'
};
document.getElementById("js-date").innerHTML = date.toLocaleString("ru", options);
Про форматирование и вывод даты пишут здесь: https://learn.javascript.ru/datetime
И ещё этот пост читала, но там автор как-то не очень в теме https://habrahabr.ru/post/275353/
Результат:
Демо
Код