숫자를 랜덤으로 가지고 올 수 있는 Math.random( ); 을 이용한 예제입니다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또번호추첨기</title>
<link rel="stylesheet" href="style.css">
<script defer src="ex02.js"></script>
</head>
<body>
<div id="lotto">
<div id="num1"></div>
<div id="num2"></div>
<div id="num3"></div>
<div id="num4"></div>
<div id="num5"></div>
<div id="num6"></div>
<div id="plus">+</div>
<div id="bonus"></div>
</div>
<button type="button" id="btn">행운번호 추첨</button>
</body>
</html>
- css
#lotto{
width:1920px;
position:relative;
margin:0 auto;
}
#lotto div{
border:2px solid #aaa;
width:100px;
height:100px;
float:left;
margin-top:50px;
margin-left:30px;
text-align: center;
line-height:100px;
font-size:30px;
border-radius:5px;
}
#lotto #plus{
border:none;
font-size:40px;
}
#lotto #bonus{
color:rgb(32, 118, 255);
border:2px solid rgb(32, 118, 255);
margin-left:30px;
}
#btn{
clear:both;
float:left;
border:2px solid rgb(32, 118, 255);
background:none;
width:200px;
height:50px;
font-size:16px;
margin-top:50px;
margin-left:30px;
cursor: pointer;
border-radius:5px;
color:rgb(32, 118, 255);
font-weight: 600;
}
#btn:hover{
background:rgb(32, 118, 255);
color:#fff;
border:none;
}
이렇게 입력을 하면 출력되는 화면입니다.
실제 로또번호 추출기처럼 보너스 번호까지 구현이 되도록 제작을 했습니다.
화면의 행운번호 추첨이라는 버튼을 클릭하면 1 ~ 45 까지의 숫자가 랜덤으로 출력되는 것이 이 예제의 기획입니다.
function random1(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num1').innerHTML = randomNum;
}
숫자를 랜덤으로 추출하기 위해서 Math.random( );을 사용하였습니다.
Math.random( );은 0.00 ~ 1.00 까지의 숫자를 소수점으로 랜덤으로 추출하기 때문에 45까지의 숫자를 구현하기 위해서 * 45를 해줬고, 0부터 시작하기 때문에 + 1 을 더해줬습니다.
랜덤으로 나온 값이 정수의 값으로 불러오게 하기 위해서 Math.floor( );로 감싸줍니다.
첫 번째 숫자가 나와야 할 네모박스 안에 추출된 숫자를 넣어주기 위해서 num1에 randomNum이란 변수를 적용합니다.
function random1(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num1').innerHTML = randomNum;
}
function random2(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num2').innerHTML = randomNum;
}
function random3(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num3').innerHTML = randomNum;
}
function random4(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num4').innerHTML = randomNum;
}
function random5(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num5').innerHTML = randomNum;
}
function random6(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num6').innerHTML = randomNum;
}
function random7(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('bonus').innerHTML = randomNum;
}
그리고 7번째 숫자까지 랜덤으로 숫자가 추출되게 적용합니다.
function btnClick(){
random1();
random2();
random3();
random4();
random5();
random6();
random7();
};
const btn = document.getElementById('btn');
btn.addEventListener('click',btnClick);
마지막으로 랜덤 숫자가 추출되는 함수들을 btnClick( );이라는 함수를 만들어 넣어준 다음 addEventListener을 이용해
버튼을 click했을 때 랜덤 숫자가 추출되어 화면에 표시되게 구현했습니다.
- javascript
'use strict';
function random1(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num1').innerHTML = randomNum;
}
function random2(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num2').innerHTML = randomNum;
}
function random3(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num3').innerHTML = randomNum;
}
function random4(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num4').innerHTML = randomNum;
}
function random5(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num5').innerHTML = randomNum;
}
function random6(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('num6').innerHTML = randomNum;
}
function random7(){
const randomNum = Math.floor(Math.random() * 45 + 1);
document.getElementById('bonus').innerHTML = randomNum;
}
function btnClick(){
random1();
random2();
random3();
random4();
random5();
random6();
random7();
};
const btn = document.getElementById('btn');
btn.addEventListener('click',btnClick);
'Javascript' 카테고리의 다른 글
11.Javascript 배열 추가 삭제 (0) | 2022.03.08 |
---|---|
10.Javascript 화살표 함수(arrow function) (0) | 2022.03.07 |
08.Javascript 배열 정리 (0) | 2022.03.03 |
07.Javascript 기초 예제 자판기 만들기 (0) | 2022.02.25 |
06.Javascript Object 이론 정리 (0) | 2022.02.23 |