Генератор случайных чисел для сайта /HTML/

Зачем вашему сайту нужен генератор случайных чисел? Сейчас стало модным проводить различные конкурсы и лотереи, все эти моменты связаны с нумерацией и прямыми трансляциями. Организатор в прямом эфире открывает страницу генератора случайных чисел, вводит параметры, интервал нужных чисел, нажимает кнопку и все видят номер победителя. Все честно и правильно, но возникает вопрос: почему показывают чей то чужой сайт, а не ваш, например? А все потому, что у вас на сайте нет генератора случайных чисел! А значит, самое время его установить!

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

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

Шаг 1 Добавьте HTML для интерфейса

Сначала в текстовый редактор WordPress или блок HTML вставьте следующий код:

<div id="lottery-container">
    <h3>Генератор случайных чисел (Лотерея)</h3>
    <label for="min-number">Минимальное число:</label>
    <input type="number" id="min-number" value="1" />
    <label for="max-number">Максимальное число:</label>
    <input type="number" id="max-number" value="100" />
    <button id="generate-btn">Провести лотерею</button>
    <h4>Результаты:</h4>
    <ul id="winners-list"></ul>
</div>

Этот HTML создаёт простую форму, где можно указать минимальное и максимальное число, а затем нажать кнопку для запуска генератора.

Шаг 2 Скрипт для генерации случайных чисел

Теперь добавьте следующий JavaScript-код. Вы можете вставить его либо в файл вашей темы, либо с помощью плагина для пользовательского кода, например, через плагин “Insert Headers and Footers”.

document.addEventListener('DOMContentLoaded', function() {
    // Получаем ссылки на элементы
    const minNumberInput = document.getElementById('min-number');
    const maxNumberInput = document.getElementById('max-number');
    const generateBtn = document.getElementById('generate-btn');
    const winnersList = document.getElementById('winners-list');

    // Функция для генерации случайного числа в заданном диапазоне
    function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Функция для проведения лотереи
    function generateWinners() {
        const min = parseInt(minNumberInput.value);
        const max = parseInt(maxNumberInput.value);

        // Проверка на корректность интервала
        if (isNaN(min) || isNaN(max) || min >= max) {
            alert('Пожалуйста, введите корректный числовой интервал!');
            return;
        }

        // Генерируем три уникальных призовых места
        const winners = new Set();
        while (winners.size < 3 && winners.size <= max - min + 1) {
            winners.add(getRandomNumber(min, max));
        }

        // Отображаем результат
        winnersList.innerHTML = ''; // Очищаем список
        Array.from(winners).forEach((winner, index) => {
            const listItem = document.createElement('li');
            listItem.textContent = `Место ${index + 1}: Участник №${winner}`;
            winnersList.appendChild(listItem);
        });
    }

    // Подключаем обработчик события на кнопку
    generateBtn.addEventListener('click', generateWinners);
});

Как это работает

1. JavaScript-код слушает событие DOMContentLoaded, чтобы дождаться загрузки страницы.
2. При нажатии кнопки “Провести лотерею” скрипт забирает значения минимального и максимального чисел, генерирует 3 случайных числа (призовых места), проверяя, чтобы не было повторов.
3. Результаты выводятся в виде списка.

Шаг 3 Дополнительное оформление

Для лучшего вида можно добавить CSS:

#lottery-container {
    padding: 10px;
    border: 1px solid #ddd;
    max-width: 400px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    border-radius: 5px;
}
#lottery-container h3 {
    text-align: center;
}
#lottery-container label {
    display: block;
    margin-top: 10px;
}
#lottery-container input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
}
#lottery-container button {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#lottery-container button:hover {
    background: #005a87;
}
#winners-list {
    padding: 0;
    list-style-type: none;
}
#winners-list li {
    margin: 5px 0;
    font-weight: bold;
}

После добавления HTML, JavaScript и стилей ваш сайт WordPress сможет проводить лотереи с генерацией трёх случайных чисел для призовых мест. Вы также можете легко заменить стили и элементы интерфейса под дизайн вашего сайта.