Привет, выродки,
В этой статье мы снова создадим очень простую веб-страницу с минимальным количеством 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 вещи:
- Преобразуйте полученный код в 6-значный код, используя дополнительные конечные нули для каждого однозначного числа.
- Проверить, есть ли полученный код в бесконечно длинном списке доступных цветов или нет
Здесь я выберу вариант 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
Спасибо, что прочитали это.
Хлопайте, если вам это нравится….
До свидания :)