Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой статье мы создадим Генератор случайных чисел с использованием HTML и JavaScript. Раньше была игра, в которой мы, люди, должны были выбрать число, выбирая лист бумаги или считая в уме, слушая старт и стоп. Теперь, как разработчик, система выберет число и даст нам вывод в пределах определенного диапазона.
Случайное число само слово указывает, что оно будет выбирать любую цифру или целое число в указанном пуле ограниченных или неограниченных чисел, которые не имеют различимого шаблона для предсказания. Генератор случайных чисел, подобный приведенным выше, – это устройство, которое может генерировать одно или несколько случайных чисел в пределах определенной области.
Генераторы случайных чисел могут быть аппаратными или генераторами псевдослучайных чисел.
Я надеюсь, что у вас должно быть представление о проекте. Давайте посмотрим на наш проект.
Html-код генератора случайных чисел: -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>JavaScript Random Number Generator</title>
<link rel="stylesheet" type="text/css" href="random.css">
<meta name="description" content="Use Vanilla JavaScript to generator a number in a given range!">
</head>
<body>
<div class="row">
<div class="col-2"></div>
<div class="col-8" align="center">
<h1>JavaScript Random Number Generator</h1>
<div class="myform">
I will generate a random integer between <br><br><input type="number" id="min_value" placeholder="Min Value"><br>
<br>and<br><br>
<input type="number" id="max_value" placeholder="Max Value"><br>
<br><br>
<button id="myBut" onclick="generate()" onmousedown="sound.play()">Generate!</button><br><br>
<div class="green" id="output"> </div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Это код HTML для генератора чисел. В этом коде мы разделили окно на строки, вызвав функцию div.
Заголовок для нашего генератора случайных чисел теперь будет добавлен внутри нашего элемента div с помощью тега h1›, а форма, в которой мы примем два ввода — один для минимального значения, а другой для максимального значения — будет создана с использованием тега тег div. и после этого мы сгенерируем случайное число с помощью генератора кнопок с функцией клика, которую мы сделаем с помощью тега кнопки.
И определили кнопку, в которой мы определили функцию onclick(), которая сделает ее отзывчивой, когда мы нажимаем на нее и воспроизводим звук. Теперь мы закончили с частью HTML, давайте создадим скрипт CSS и стилизуем страницу.
Вывод HTML-кода:-
Код CSS для генератора случайных чисел: -
.classy {
padding: 2.5px;
border-radius: 6px;
background-color: green;
color: white;
font-size: 24px;
}
.classy:hover {
opacity: .5;
background-color: black;
}
body {
background-color: black;
color: #49FF0D;
line-height: 1.5;
font-size: 24px;
}
/* Style inputs with type="text", select elements and textareas */
input[type=number] {
background-color: rgb(8,13,32);
padding: 12px; /* Some padding */
color: lightgreen;
font-size: 24px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
button {
background-color: lightgreen;
color: black;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 24px;
}
button:hover {
border-color: grey;
border-style: solid;
border-width: 1px;
opacity: .5;
}
.green {
color: lightgreen;
font-size: 56px;
}
/* All elements width includes borders and padding*/
* {
box-sizing: border-box;
}
/* Rows*/
.row::after {
content: "";
clear: both;
display: table;
}
/* Classes containing "col-"*/
[class*="col-"] {
float: left;
padding: 15px;
}
/* Column width for small devices (i.e. smart phones)*/
[class*="col-"] {
width: 100%;
}
/* Column width for large devices (i.e. computers)*/
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/* Column width for large devices (i.e. tablets)*/
@media only screen and (min-width: 600px) {
.col-t-1 {width: 8.33%;}
.col-t-2 {width: 16.66%;}
.col-t-3 {width: 25%;}
.col-t-4 {width: 33.33%;}
.col-t-5 {width: 41.66%;}
.col-t-6 {width: 50%;}
.col-t-7 {width: 58.33%;}
.col-t-8 {width: 66.66%;}
.col-t-9 {width: 75%;}
.col-t-10 {width: 83.33%;}
.col-t-11 {width: 91.66%;}
.col-t-12 {width: 100%;}
}
В этом коде CSS мы установили ширину для каждого столбца и строки, а также мы разработали тело в соответствии со свойствами CSS, чтобы он не выглядел как простой проект.
Мы установим отступ на «2,5px», используя селектор класса «.classy», добавим радиус границы 6px, используя свойство border-radius, установим фон на «зеленый», используя свойство background, и установим цвет текста на «белый», используя свойство border-radius.
После этого мы стилизуем иконку, ввод и тело нашего генератора случайных чисел. Чтобы сделать наш веб-сайт более привлекательным, мы изменим цвет ввода и добавим свойство наведения на кнопку и поле ввода.
Теперь, когда мы создали структуру и разработали страницу, мы должны сделать ее отзывчивой для генерации чисел, в этом случае мы создадим JavaScript.
Вывод CSS:
Код JavaScript для генератора случайных чисел: -
var sound = new Audio();
sound.src = "https://www.codingcommanders.com/javascript/random-number-generator/chime.mp3";
function randNum(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generate () {
let min = document.getElementById('min_value').value;
let max = document.getElementById('max_value').value;
let rand = randNum(min,max);
document.getElementById("output").innerHTML = rand;
}
document.getElementById("myBut").addEventListener("click", generate);
В этом скрипте мы добавили звук и упомянули его источник, а для генерации случайного числа мы определили Math.ceilфункцию JS, которая используется для округления числа и передачи его до ближайшего целого числа.
Мы также определили Math.floor, этот метод возвращает наименьшее целое число, большее или равное значению, которое мы передаем целому числу.
Теперь мы завершили код Java Script. и, следовательно, мы подошли к концу этого проекта, но перед этим мы обязательно предварительно просмотрим наш проект в данном разделе вывода.
Мы успешно создали наш Генератор случайных чисел с использованием HTML, CSS и JavaScript. Вы можете использовать этот проект для развития своих навыков работы с JavaScript и улучшения их в будущем, потому что JavaScript необходим, чтобы сделать проект адаптивным во фронтенд-разработке.
Если вы обнаружите, что этот блог полезен, обязательно выполните поиск codewithrandom в Google для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.
НАПИСАЛ — Харш Савант
Какой редактор кода вы используете для генератора случайных чисел?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да, Генератор случайных чисел — это адаптивный проект.
какая польза от генератора случайных чисел?
Такие веб-сайты, как веб-сайт Lucky Draw, используют генераторы случайных чисел, которые также используются для обеспечения безопасности, поскольку мы можем использовать случайное число, которое генерируется каждый раз, когда оно отображается, для аутентификации пользователей.
