Сейчас в соцсетях вирусятся милые мини-сайты с простыми вопросами. Главная «фишка» — кнопка «Нет», на которую невозможно нажать, и интерактивные эффекты. Это отличный проект, чтобы разобраться, как работают координаты элементов в браузере и события мыши.
Что нам понадобится:
-
Любой текстовый редактор (Блокнот, VS Code, Sublime Text).
-
Немного хорошего настроения.
-
Базовые знания HTML (хотя можно просто скопировать готовый код).
Разбор логики: Основная магия происходит в функции escape(). Мы отслеживаем событие onmouseover (наведение мыши) и мгновенно меняем свойства top и left у кнопки на случайные числа в пределах видимого окна.
Как кастомизировать:
-
Текст: Поменяйте «Пойдёшь гулять?» на «Давай съедим пиццу?» или любой другой вопрос.
-
Символы: Вместо котика можно вставить любой ASCII-арт.
-
Сложность: В коде уже прописано увеличение кнопки «ДА» с каждой попыткой — это делает финал неизбежным!
Разбор статьи: как создать Страницу-Детектор лжи «Иллюзия выбора» на HTML/JS