본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.
예제풀이
이 전 글에서 정리하였던 Math 객체 중 Random 함수를 이용한 로또번호발생기이다.
1 2 3 4 5 | <body> <button onclick="btn_lotto();">로또발생기</button> <ul id="lotto"></ul> <select id="lottolist"></select> </body> | cs |
<body>
button태그를 이용하여 버튼을 클릭할 시 btn_lotto()함수를 호출 한다.
그 값을 ul 태그와 select태그에 뿌려주기 위하여 ul , select 태그를 선언하였다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | function btn_lotto() { var lotto = []; while (lotto.length <= 6) { n = getRandomInt(1, 45); if (lotto.findIndex(isDupliCheck) == -1) { //find() -> 배열에 어떤숫자가 있는지확인하고 그 숫자 그대로 돌려 //findindex()-> 어떤 숫자 있는지 확인하고 그 인덱스 값을 돌림 없으면 -1 돌림 lotto.push(n); } } var out = "<li>"; out += lotto.join("</li><li>"); out += "</li>"; document.getElementById("lotto").innerHTML = out; // lottolist 안에 동적 option 생성 추가 코딩 var lottolist = document.getElementById("lottolist"); for (var i = 0; i < 6; i++) { n = lotto[i]; var op = new Option(n, n); lottolist.options[i] = op; } } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function isDupliCheck(num) { return num == n; } | cs |
<script>
함수 3개를 선언해주었는데 getRandomInt(), isDupliCheck() 함수는 btn_lotto함수 호출시에 호출되는 함수이다.
getRandomInt(min,max) :
Math.random함수를 이용하여 입력받은 min, max값을 이용하여 랜덤값을 생성한 후 그 값을 리턴한다.
isDupliCheck(num):
중복한 값이 있는지 확인하기 위한 함수이다. boolean형으로 반환
btn_lotto() :
먼저 배열을 선언한다. 반복문을 통하여 로또번호의 갯수만큼 랜덤값을 getRandomInt함수를 이용하여 생성한 후에
중복된 값이 없을경우 push 속성을 통하여 배열에 값을 삽입한다.
var out = "<li>'과 문자열 join 함수를 통하여 문자열로 ul태그 안에 li태그를 추가한다.
하단 for문은 select태그 안에 option을 채워넣기 위한 동작이다.
var op = new Option(n,n) 형식으로 값을 넣어주게되면 알아서 value, text 값으로 삽입된다.
<실행결과>
'이전 글 > JavaScript' 카테고리의 다른 글
| 17. JavaScript Ex.16 DOM(Document Object Model)-2 (0) | 2018.01.18 |
|---|---|
| 16. JavaScript Ex.15 DOM(Document Object Model) (0) | 2018.01.18 |
| 14. JavaScript Ex.13 Math Object - 내장객체 (0) | 2018.01.18 |
| 13. JavaScript Ex.12 Date 함수/매개변수 (0) | 2018.01.18 |
| 12. JavaScript Ex.11 문자열 함수 (0) | 2018.01.18 |
