Часы с меняющимся фоном

Всем привет! Решил выпустить урок на тему часы с меняющимся фоном, цвет которого будет закодирован в шестнадцатеричной системе счисления. Часы будут отображаться в числовом формате цифр, максимум может быть 6 разновидностей оттенков, как и цветовой палитр, соответствующий времени, который отображается в нашей ОС и с каждой секундой показатель будет меняться и тем самым будет изменятся наш фон.

 

1.  Создаем тег c 

    id "clock"

   для отображения часов

2. Div c id "color"

    отображения кодировки цвета

 

Чтобы изменить то, что находится под данными id открываем файл js создадим в нем переменную clock, тем самым вытащим элемент c 

 id clock

и то же самое сделаем с 

 id color

 

var clock = document.getElementById("clock");
var color = document.getElementById("color");

 

Далее создадим функцию внутри

 

function RootHelp() { }

 

Назовем ее как угодно, в моем случае RootHelp, внутри которой создадим объект Date и дадим ему имя

 

time var time = new Date();

 

Далее 3 переменные для часов минут и секунд

var h = (time.getHours() % 12).toString();
var m = time.getMinutes().toString();
var s = time.getSeconds().toString();

 

С помощью соответствующих методов, мы передаем в эти переменные значения нашего времени

h - будет содержать часы
m - минуты
s - секунды

Чтобы скрипт заработал должным образом, добавим следующие проверки. Если время на часах будет меньше 2-х, то мы подставляем 0 в ее начало

 

if (h.length< 2) {
h = '0' + h;}

if (m.length< 2) {
m = '0' + m;}

if (s.length< 2) {
s = '0' + s;}

 

Теперь мы можем соединить их воедино и положить в переменную, назовем ее, как и функцию RootHelp, так чтобы это выглядело как настоящие часы
 

var clockString = h + ':' + m + ':' + s;

 

Тоже самое сделаем и для цвета
 

var colorString = '#' + h + m + s;

 

Далее с помощью свойства 

textContent

У наших переменных мы можем изменять их содержимое

 

clock.textContent = clockString;
color.textContent = colorString;

 

Далее чтобы изменить фон, мы можем обратиться к элементу body через документ
 

document.body.style.background = colorString;}

 

Для того, чтобы страница обновлялась ежесекундно вызовем функцию
 

RootHelp();
setInterval(rootHelp,1000);

 

На этом все, надеюсь данный материал Вам пригодится, а я прощаюсь, до будущих материалов друзья!)