안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 HTML 및 JavaScript를 사용하여 난수 생성기를 만듭니다. 예전에는 우리 인간이 시작하고 멈추는 것을 들으면서 종이 한 장을 고르거나 마음속으로 숫자를 선택해야 하는 게임이 있었습니다. 이제 개발자로서 시스템은 숫자를 선택하고 정의된 범위 내에서 출력을 제공합니다.
난수(Random Number): 단어 자체는 예측을 위한 식별 가능한 패턴이 없는 제한된 숫자 또는 무제한의 지정된 풀에서 숫자 또는 정수를 선택한다고 명시합니다. 위와 같은 난수 생성기는 정의된 범위 내에서 하나 이상의 난수를 생성할 수 있는 장치입니다.
난수 생성기는 하드웨어 기반 또는 의사 난수 생성기일 수 있습니다.
프로젝트에 대한 아이디어가 있었기를 바랍니다. 우리 프로젝트를 살펴 보겠습니다.
난수 생성기 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 함수를 호출하는 행으로 창을 나눴습니다.
이제 난수 생성기의 제목이 h1> 태그를 사용하여 div 요소 내에 추가되고 두 개의 입력(하나는 최소값, 다른 하나는 최대값)을 허용하는 양식이 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 속성에 따라 본문을 디자인하여 단순한 프로젝트처럼 보이지 않도록 했습니다.
클래스 선택기 ".classy"를 사용하여 패딩을 "2.5px"로 설정하고, border-radius 속성을 사용하여 테두리 반경 6px를 추가하고, background 속성을 사용하여 배경을 "green"으로 설정하고, border-radius 속성을 사용하여 텍스트 색상을 "white"로 설정합니다.
그런 다음 난수 생성기의 아이콘, 입력 및 본문의 스타일을 지정합니다. 웹사이트를 더 매력적으로 만들기 위해 입력 색상을 변경하고 버튼과 입력 상자에 hover 속성을 추가합니다.
이제 구조를 만들고 페이지를 디자인했으므로 숫자를 생성하기 위해 반응형으로 만들어야 합니다. 이 경우 JavaScript를 만들 것입니다.
CSS 출력:
난수 생성기에 대한 자바 스크립트 코드 : -
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);이 스크립트에서 우리는 소리를 추가하고 그 출처를 언급하고 난수를 생성하기 위해 숫자를 반올림하고 가장 가까운 정수로 전달하는 데 사용되는 JS 함수인 Math.ceil을 정의했습니다.
우리는 또한 정의했습니다 Math.floor 이 메서드는 정수를 전달하는 값보다 크거나 같은 가장 작은 정수를 반환합니다.
이제 Java Script Code를 완성했습니다. 따라서 우리는 이 프로젝트의 끝에 이르렀지만 그 전에 주어진 출력 섹션에서 프로젝트를 미리 볼 수 있습니다.
HTML, CSS 및 JavaScript를 사용하여 난수 생성기를 성공적으로 만들었습니다. JavaScript는 Front-End Development에서 프로젝트 응답성을 만드는 데 필요하기 때문에 JavaScript 기술을 개발하고 미래를 위해 향상시키는 데 이 프로젝트를 사용할 수 있습니다.
이 블로그가 도움이 되었다면 Google에서 codewithrandom을 검색하여 소스 코드가 있는 프론트엔드 프로젝트를 검색하고 Follow the Code with Random Instagram 페이지를 확인하십시오.
작성자 — Harsh Sawant
난수 생성기에 어떤 코드 편집기를 사용합니까?
개인적으로 간단하고 사용하기 쉬운 VS Code Studio를 사용하는 것이 좋습니다.
이 프로젝트는 반응형입니까?
예, 난수 생성기는 반응형 프로젝트입니다
난수 생성기의 용도는 무엇입니까?
Lucky Draw 웹사이트와 같은 웹사이트는 난수 생성기를 사용하며, 사용자를 인증하기 위해 표시될 때마다 생성되는 난수를 사용할 수 있기 때문에 보안에도 사용됩니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭 (0) | 2023.06.17 |
|---|---|
| 프로그래밍 「 자바스크립트 편」GraalVM 언어의 새로운 기능 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」Chrome 확장 프로그램 개발을 위한 고급 기술: 종합 가이드 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」HTML 및 JavaScript를 사용한 간단한 카운트 다운 타이머 (0) | 2023.06.17 |
| 프로그래밍 「 자바스크립트 편」코드를 사용하여 HTML 및 CSS로 세련된 로그인 페이지 만들기 (0) | 2023.06.16 |
