В духе Ощутить радость от создания крошечных программ и создания глупой хрени вот супер-крошечная вещь, которую вы можете сделать менее чем за 15 минут. Это просто страница, которая каждую секунду меняет цвет фона на случайный цвет.
Вот демо-версия того, что мы строим. https://yarocruz.github.io/colours/
Настройка
Откройте терминал или командную строку и создайте два файла:
touch index.html app.js
Откройте эти три файла в своем любимом тексте или, если у вас есть настройка Visual Studio Code, для открытия из терминала:
code .
В файл index.html скопируйте следующий код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colours</title> </head> <body> <script src="app.js"></script> </body> </html>
Это практически пустая страница с тегом ‹script><, который ссылается на наш файл app.js.
В файл app.js скопируйте следующий код:
// grab the body element const body = document.querySelector("body"); setInterval(() => { // generate 3 random numbers between 0 255 const red = Math.floor(Math.random() * 255) const green = Math.floor(Math.random() * 255) const blue = Math.floor(Math.random() * 255) // set the inline style of the bacground-color of the body using // template literals to set the 3 colors to the rgb value body.style.backgroundColor = `rgb(${red}, ${green}, ${blue})` }, 1000) // repeat interval every second
Подводя итог тому, что происходит в этом очень коротком фрагменте, мы получаем элемент body с помощью API document.querySelector. Затем с помощью функции setInterval мы устанавливаем интервал, который будет происходить на странице каждую секунду. Мы сгенерируем три случайных числа в диапазоне от 0 до 255. Мы используем метод Math.random() с методом Math.floor() для округления в меньшую сторону. ' десятичные дроби. (Чтобы узнать больше о Math.random(), прочтите мою статью.).
Эти три числа представляют значения красного, зеленого и синего, которые мы затем передаем в значение, подобное функции rgb().
Это будет менять цвет фона элемента body, по сути, всей страницы, каждую секунду.
После сохранения просмотрите файл и посмотрите красивые цвета.
Посмотрите, сможете ли вы сделать другие мелочи, такие как возможность остановки интервала, возможность копирования значений цвета и т. д. Хитрость в том, чтобы сделать его маленьким и глупым.