Привет, выродки,

В этой статье мы снова создадим очень простую веб-страницу с минимальным количеством HTML, CSS и большим количеством JavaScript. (Нет библиотеки, только чистые JS).

Что такое шестнадцатеричные часы?

Для любого цвета в формате RGB существует определенный код длины 6. Означает, что код состоит из 6 букв / алфавитов или их комбинации. Мы будем иметь дело только с комбинацией цифр, поскольку формат часов не поддерживает алфавиты. Таким образом, в реальных часах с 24-часовым форматом в hh: mm: ss мы можно увидеть всего 6 цифр (чч + мм + сс). Теперь для этой комбинации из 6 цифр всегда существует уникальный цвет, и мы хотели бы изменить цвет фона нашей веб-страницы в соответствии с комбинацией имеющегося у нас шестнадцатеричного кода, и поэтому ШЕСТИГРАННЫЙ ЧАСЫ.

Скажем, время сейчас 11:50:46 (очевидно, AM), затем сгенерированный шестнадцатеричный код - # 115046, и для этого кода должен существовать уникальный цвет, который мы бы изменили цвет фона.

Надеюсь, теперь все ясно, не так ли?

Давайте начнем с нашего кода;)

Базовая настройка html для этого примера:

<!DOCTYPE html>
<html>
   <head>
       <title>Hex-clock with pure Js </title>
   </head>
   <body style="color:white;">
   </body>
</html>

Основная идея этого примера - изменить CSS-правило background-color для всего тела нашей страницы для каждого изменения секундной стрелки часов. Теперь это можно сделать в два шага:

1.Создание функции, которая вычисляет и обновляет чч: мм: сс каждую секунду.

2. Фактическое изменение цвета фона страницы и отображение времени в виде шестнадцатеричного кода на DOM (объектная модель документа)

Это наша первая функция, скажем time ().

function time()
{
 //constructor Date() built-in in Javascript
 var date=new Date();
 //getting hours,minutes,seconds from date
 var hours=date.getHours();
 var minutes=date.getMinutes();
 var seconds=date.getSeconds();
var arr=[hours,minutes,seconds].map(function(num){
   return (num<10) ? '0'+num : String(num) 
});
hours=arr[0];
minutes=arr[1];
seconds=arr[2];
return hours + ':' +  minutes + ':' + seconds;
}

Разберем работу time () на примере.

Время создания скриншота - 12:50:43. Мы сохраняем этот точный вывод, как указано выше, в нашей переменной date и вызываем для него 3 метода:

1. getHours (): возвращает значение часа переменной date.

var hours=date.getHours()
<< 12 //RESULT: hours=12

2. getMinutes (): возвращает значение минуты date.

var minutes=date.getMinutes()
<< 50  //RESULT:minutes=50

3. getSeconds (): возвращает значение секунд date.

var seconds=date.getSeconds()
<< 43 //RESULT: seconds=43

А теперь самое главное. Здесь мы будем хранить полученные выше значения, а именно часы, минуты, секунды, в массиве и вызывать на нем функцию map (). map () - встроенная функция JavaScript, подходящая для массивов. Он берет каждый элемент массива, для которого он вызывается, и передает этот элемент массива в качестве аргумента функции внутри map (). Функция внутри map () - это анонимная функция, что означает, что у нее нет имени, но она выполняет свою работу, получая каждый элемент массива (называемого «num ”В моем коде), как указано в теле функции.

Работа анонимной функции map ():

Мы используем простой оператор return, который оценивает условие и на его основе что-то возвращает. Здесь я использовал тернарный оператор, чтобы вернуть либо '0' + num , если условие истинно, или возвращает String (num), если оно ложно. Это поведение тернарного оператора по умолчанию. Для каждого элемента массива условие будет быть оцененным.

Условие здесь - проверить, больше ли элементов в нашем массиве 10 или нет. Мы делаем эту проверку, потому что, как вы могли догадаться, предположим, что для значения времени, такого как 8: 8: 18 (скажем, например), наш окончательный код полученный будет иметь вид # 8818 и для этого шестнадцатеричного кода недоступен цвет. Итак, здесь мы можем сделать 2 вещи:

  1. Преобразуйте полученный код в 6-значный код, используя дополнительные конечные нули для каждого однозначного числа.
  2. Проверить, есть ли полученный код в бесконечно длинном списке доступных цветов или нет

Здесь я выберу вариант 1, поскольку он кажется более подходящим и будет 100% давать цвета для каждого тика. Итак, вот почему, если число равно ‹10, я добавляю ноль перед, а затем сохраняю его в новом массиве (var arr) как элемент массива.

Итак, согласно моему примеру, мой новый массив, содержащий форматированные значения данного текущего времени (var arr), выглядит так:

var arr=["12","50","43"];

Теперь я переназначаю переменные часов, минут, секунд заново отформатированным значениям из массива и возвращаю строку с «:» после и перед, чтобы она выглядела как настоящая. формат времени. («12»: «50 ':» 43' вот так).

Теперь пора обновить background-color и отобразить время на странице, которое автоматически обновляется и изменяется каждую секунду.

А вот и вторая функция нашего кода, output (time),, которая принимает строку в качестве аргумента, а аргумент передается в output () - это оператор возврата нашей функции time (). Это сбивает с толку? На самом деле это не так!

function output(time)
{
var color= '# ' + time;
document.body.bgColor=color;
document.body.textContent=color;
}

Работа функции output ():

Полученный аргумент добавляется с помощью символа «#» и сохраняется в переменной, чтобы вывести на нашу страницу что-то вроде этого: # 12: 50: 43. Затем мы меняем свойство background-color и после этого отображаем наше красиво отформатированное значение времени в DOM.

Теперь, чтобы обновлять DOM каждую секунду, нам нужна функция, которая автоматически запускается каждую секунду. Благодаря Js такая функция доступна и называется setInterval () , который получает функцию в качестве первого аргумента и число, которое является значением в миллисекундах, после которого вы хотите запустить первый аргумент (функцию) и продолжать этот процесс до тех пор, пока пользователь вручную не нарушит его цикл, закрыв вкладку / окно.

output (time ()) = ›Это именно то, что мы обсуждали выше, нам нужна функция для запуска после получения вывода time () и передаем ее какой-либо другой функции. Следовательно, мы вызываем output () после завершения time () через каждую секунду, используя setInterval ()..

setInterval(output(time()),100)

Итак, мы закончили с нашим небольшим, быстрым руководством по Hex-Clock.

Надеюсь, вам будет интересно, полезно!

Вот моя ссылка на кодовое перо на тот же пример: https://codepen.io/dalalRohit/pen/NBxPmd

Спасибо, что прочитали это.

Хлопайте, если вам это нравится….

До свидания :)