Как установить простой генератор паролей на сайте

Объяснение кода
Инструкция по вставке кода в WordPress
Объяснение кода, отвечающего за стили

Последнее обновлене - 14 июня 2024 в 11:18

В этой заметке покажу, как сделать простой генератор паролей на сайте, чтобы получить рандомное число онлайн. Достаточно часто требуется вот такой генератор случайных чисел, чтобы задать или поменять пароль в каком-либо аккаунте.

Пример работы такого генератора вы можете посмотреть на моём сайте вот на ЭТОЙ странице. Для создания генератора паролей и вставки его на сайт можно использовать комбинацию JavaScript и HTML. Вот пример кода, который ты можешь вставить в HTML-редактор на своём сайте WordPress:

Содержание:

Объяснение кода.
Инструкция по вставке кода в WordPress.
Объяснение кода, отвечающего за стили.

<!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>

<!DOCTYPE html>

<head>

<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>

<h2>Генератор паролей</h2>

<button onclick="generatePassword()">Сгенерировать пароль</button>

</div>

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-редактор.

Сохранение и публикация:

Сохрани изменения и опубликуй страницу или запись.

Теперь на твоем сайте будет доступен простой и удобный генератор рандомных цифр, букв и знаков.

Можно немного усовершенствовать вышеуказанный код, добавив возможность вернуться на главную страницу сайта. Вот обновленный код, который включает кнопку для возврата на главную страницу сайта:

<!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>

<!DOCTYPE html>

<head>

<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>

<h2>Генератор паролей</h2>

<button onclick="generatePassword()">Сгенерировать пароль</button>

<button onclick="goToHomePage()">Вернуться на главную страницу</button>

</div>

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, как и раньше. Теперь у тебя будет генератор паролей с кнопкой для возврата на главную страницу.

Объяснение кода, отвечающего за стили

Давайте рассмотрим строчки кода, которые отвечают за стилизацию генератора паролей, чтобы понять, как они работают.

#passwordGenerator {
    text-align: center; /* Центрирует текст внутри элемента.*/
    padding: 20px; /*Добавляет внутренний отступ в 20 пикселей со всех сторон.*/
    border: 1px solid #ddd; /*Добавляет границу толщиной 1 пиксель и цветом светло-серого оттенка.*/
    background-color: #f9f9f9; /*Устанавливает цвет фона светло-серого оттенка.*/
    margin: 20px auto; /*Добавляет внешние отступы в 20 пикселей сверху и снизу, а также центрирует блок по горизонтали.*/
    max-width: 400px; /*Ограничивает максимальную ширину элемента до 400 пикселей.*/
}

#passwordGenerator {

text-align: center; /* Центрирует текст внутри элемента.*/

padding: 20px; /*Добавляет внутренний отступ в 20 пикселей со всех сторон.*/

border: 1px solid #ddd; /*Добавляет границу толщиной 1 пиксель и цветом светло-серого оттенка.*/

background-color: #f9f9f9; /*Устанавливает цвет фона светло-серого оттенка.*/

margin: 20px auto; /*Добавляет внешние отступы в 20 пикселей сверху и снизу, а также центрирует блок по горизонтали.*/

max-width: 400px; /*Ограничивает максимальную ширину элемента до 400 пикселей.*/

}

#generatedPassword {
    font-size: 20px; /*Устанавливает размер шрифта 20 пикселей.*/
    font-weight: bold; /*Делает текст жирным.*/
    color: #333; /*Устанавливает цвет текста темно-серым.*/
    margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей.
*/
    word-wrap: break-word; /*Переносит слова на новую строку, если они не умещаются в блоке.*/
}

#generatedPassword {

font-size: 20px; /*Устанавливает размер шрифта 20 пикселей.*/

font-weight: bold; /*Делает текст жирным.*/

color: #333; /*Устанавливает цвет текста темно-серым.*/

margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей.

word-wrap: break-word; /*Переносит слова на новую строку, если они не умещаются в блоке.*/

}

button {
    padding: 10px 20px; /*Добавляет внутренний отступ 10 пикселей сверху и снизу и 20 пикселей слева и справа.*/
    font-size: 16px; /*Устанавливает размер шрифта 16 пикселей.*/
    margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей.*/
    cursor: pointer; /*Меняет курсор на указатель (руку) при наведении на кнопку, что указывает на интерактивность элемента.*/
}

button {

padding: 10px 20px; /*Добавляет внутренний отступ 10 пикселей сверху и снизу и 20 пикселей слева и справа.*/

font-size: 16px; /*Устанавливает размер шрифта 16 пикселей.*/

margin-top: 10px; /*Добавляет внешний отступ сверху в 10 пикселей.*/

cursor: pointer; /*Меняет курсор на указатель (руку) при наведении на кнопку, что указывает на интерактивность элемента.*/

}

.button-container {
    margin-top: 20px; /*Добавляет внешний отступ сверху в 20 пикселей для контейнера кнопок.*/
}

.button-container {

margin-top: 20px; /*Добавляет внешний отступ сверху в 20 пикселей для контейнера кнопок.*/

}

Эти стили помогут сделать генератор паролей более аккуратным и удобным для восприятия. Выравнивание по центру, отступы и четкие границы помогают улучшить внешний вид и удобство использования интерфейса.