Создаем простые часы для сайта с помощью JavaScript

Сегодня предлагаю небольшой сниппет, который позволит вам добавить простые часы на сайт, используя для этого немного JavaScript-кода. Пример можно увидеть на Codepen.

HTML:

<div id="clock"></div>

Подготовим контейнер в котором будут отображаться часы и присвоим ему id.

JS:

    setInterval(function(){  
    	const date = new Date();  
        const format = [      
        	(date.getHours()),      
        	(date.getMinutes()<10?'0':'') + date.getMinutes(),      
        	(date.getSeconds())  ].join(":");  
        document.getElementById("clock").innerHTML = format;
    }, 900);

Код довольно-таки прост. Главное это создание класса Date и получение текущего времени с помощью трех функций getHours(), getMinutes() и getSeconds(). И в конце вывод времени в зависимости от установленного интервала (900) в элемент с соответствующим id (#clock).

Демо в песочнице:

See the Pen Clock by 4gray (@4gray) on CodePen.

Создаем простые часы для сайта с помощью JavaScript

HTML:

JS:

Демо в песочнице:

О сайте

ArtsLab