![Генератор паролей на сайте](https://hoboweb.ru/wp-content/uploads/2024/06/genparol-min.jpg)
Последнее обновлене - 14 июня 2024 в 11:18
В этой заметке покажу, как сделать простой генератор паролей на сайте, чтобы получить рандомное число онлайн. Достаточно часто требуется вот такой генератор случайных чисел, чтобы задать или поменять пароль в каком-либо аккаунте.
Пример работы такого генератора вы можете посмотреть на моём сайте вот на ЭТОЙ странице. Для создания генератора паролей и вставки его на сайт можно использовать комбинацию JavaScript и HTML. Вот пример кода, который ты можешь вставить в HTML-редактор на своём сайте WordPress:
Содержание:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Генератор паролей</title> <style> #passwordGenerator { text-align: center; padding: 20px; border: 1px solid #ddd; background-color: #f9f9f9; margin: 20px auto; max-width: 400px; } #generatedPassword { font-size: 20px; font-weight: bold; color: #333; margin-top: 10px; word-wrap: break-word; } button { padding: 10px 20px; font-size: 16px; margin-top: 10px; cursor: pointer; } </style> </head> <body> <div id="passwordGenerator"> <h2>Генератор паролей</h2> <button onclick="generatePassword()">Сгенерировать пароль</button> <div id="generatedPassword"></div> </div> <script> function generatePassword() { var length = 12; // длина пароля var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+"; var password = ""; for (var i = 0; i < length; i++) { var randomIndex = Math.floor(Math.random() * charset.length); password += charset[randomIndex]; } document.getElementById("generatedPassword").innerText = password; } </script> </body> </html> |
Объяснение кода
Этот код представляет собой простую веб-страницу, которая содержит генератор паролей. Внутри тега head определены стили для элементов страницы, таких как кнопка и сгенерированный пароль. Внутри тега body находится блок с идентификатором passwordGenerator, который содержит заголовок «Генератор паролей», кнопку «Сгенерировать пароль» и пустой блок с идентификатором generatedPassword, в который будет выводиться сгенерированный пароль.
Внутри тега script определена функция generatePassword(), которая генерирует случайный пароль заданной длины (в данном случае 12 символов) из определенного набора символов (строчные и заглавные буквы, цифры, специальные символы). Сгенерированный пароль затем выводится в блок с идентификатором generatedPassword с помощью метода document.getElementById().innerText.
При нажатии на кнопку «Сгенерировать пароль» вызывается функция generatePassword(), которая генерирует новый пароль и отображает его на странице.
Этот код создает простой генератор паролей, который будет отображаться на твоем сайте. Ты можешь вставить этот код в текстовый редактор в режиме HTML, или использовать плагин для добавления произвольного HTML/JavaScript на страницу.
Инструкция по вставке кода в WordPress
Создание новой страницы или записи:
- Перейди в админку WordPress.
- Выбери «Страницы» или «Записи» и нажми «Добавить новую».
Переключение на HTML-редактор:
- В редакторе контента найди кнопку для переключения на HTML-редактор. В зависимости от используемого редактора, это может быть вкладка «Текст» или кнопка с иконкой <>.
Вставка кода:
- Вставь приведенный выше HTML-код в HTML-редактор.
Сохранение и публикация:
- Сохрани изменения и опубликуй страницу или запись.
Теперь на твоем сайте будет доступен простой и удобный генератор рандомных цифр, букв и знаков.
Можно немного усовершенствовать вышеуказанный код, добавив возможность вернуться на главную страницу сайта. Вот обновленный код, который включает кнопку для возврата на главную страницу сайта:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Генератор паролей</title> <style> #passwordGenerator { text-align: center; padding: 20px; border: 1px solid #ddd; background-color: #f9f9f9; margin: 20px auto; max-width: 400px; } #generatedPassword { font-size: 20px; font-weight: bold; color: #333; margin-top: 10px; word-wrap: break-word; } button { padding: 10px 20px; font-size: 16px; margin-top: 10px; cursor: pointer; } .button-container { margin-top: 20px; } </style> </head> <body> <div id="passwordGenerator"> <h2>Генератор паролей</h2> <button onclick="generatePassword()">Сгенерировать пароль</button> <div id="generatedPassword"></div> <div class="button-container"> <button onclick="goToHomePage()">Вернуться на главную страницу</button> </div> </div> <script> function generatePassword() { var length = 12; // длина пароля var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+"; var password = ""; for (var i = 0; i < length; i++) { var randomIndex = Math.floor(Math.random() * charset.length); password += charset[randomIndex]; } document.getElementById("generatedPassword").innerText = password; } function goToHomePage() { window.location.href = '/'; // URL главной страницы } </script> </body> </html> |
Этот код добавляет новую кнопку, которая перенаправляет пользователя на главную страницу сайта. Тебе нужно будет вставить его в HTML-редактор страницы WordPress, как и раньше. Теперь у тебя будет генератор паролей с кнопкой для возврата на главную страницу.
Объяснение кода, отвечающего за стили
Давайте рассмотрим строчки кода, которые отвечают за стилизацию генератора паролей, чтобы понять, как они работают.
1 2 3 4 5 6 7 8 |
#passwordGenerator { text-align: center; /* Центрирует текст внутри элемента.*/ padding: 20px; /*Добавляет внутренний отступ в 20 пикселей со всех сторон.*/ border: 1px solid #ddd; /*Добавляет границу толщиной 1 пиксель и цветом светло-серого оттенка.*/ background-color: #f9f9f9; /*Устанавливает цвет фона светло-серого оттенка.*/ margin: 20px auto; /*Добавляет внешние отступы в 20 пикселей сверху и снизу, а также центрирует блок по горизонтали.*/ max-width: 400px; /*Ограничивает максимальную ширину элемента до 400 пикселей.*/ } |
1 2 3 4 5 6 7 8 |
#generatedPassword { font-size: 20px; /*Устанавливает размер шрифта 20 пикселей.*/ font-weight: bold; /*Делает текст жирным.*/ color: #333; /*Устанавливает цвет текста темно-серым.*/ margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей. */ word-wrap: break-word; /*Переносит слова на новую строку, если они не умещаются в блоке.*/ } |
1 2 3 4 5 6 |
button { padding: 10px 20px; /*Добавляет внутренний отступ 10 пикселей сверху и снизу и 20 пикселей слева и справа.*/ font-size: 16px; /*Устанавливает размер шрифта 16 пикселей.*/ margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей.*/ cursor: pointer; /*Меняет курсор на указатель (руку) при наведении на кнопку, что указывает на интерактивность элемента.*/ } |
1 2 3 |
.button-container { margin-top: 20px; /*Добавляет внешний отступ сверху в 20 пикселей для контейнера кнопок.*/ } |
Эти стили помогут сделать генератор паролей более аккуратным и удобным для восприятия. Выравнивание по центру, отступы и четкие границы помогают улучшить внешний вид и удобство использования интерфейса.
Всем WEB!