컴퓨터 프로그래밍/javascript

lotto-자바스크립트를 이용한 로또 생성기-setInterval(), clearInterval(), Math.random(), includes()

깝돌이 2020. 5. 30. 11:33 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	*{
	box-sizing: border-box;
	margin:0;
	padding:0;
	}
	#wrapper{
	background-color: skyblue;
	width:400px;
	height: 70px;
	text-align: center;
	padding-top:20px;
		}
	#result{
	width:216px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	}
	span{
	color: black;
	border-radius: 50%;
	background-color:yellow;
	margin:3px;
	width:30px;
	height:30px;
	text-align: center;
	padding-top:2px;
	display:inline-block;
	}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	var numbers;// 5, 23, 6, 12, 33, 45
	var count = 0;
	var intervalId;
	function startGame() {
		numbers = selectNumber();
		intervalId = setInterval(displayNumber, 1000);
	}
	function selectNumber() {
		numbers = new Array(6);
		
		var i = 0;
		while (i < 6) {
			var randomNumber = Math.floor((Math.random() * (46 - 1)) + 1);
			if (!numbers.includes(randomNumber)) {
				numbers[i]=randomNumber;
				i++;
			}
		}
		return numbers;
	/* 	for(var j in numbers){
		 console.log(numbers[j]);
		 }  */
	}
	function displayNumber() {
		//append를 이용해서 numbers 안에 들어 있는 숫자를 result 영역에 붙여 나간다.
		//만약에 count가 6이 되면 intervalId를 멈춘다....
		//clearInterval(intervalid);
		if(count<6){
			 var msg = '<span>'+numbers[count]+'</span>';
			$('#result').append(msg);
			count++;
		}else{
			clearInterval(intervalId);
		}
		}
	window.onload = startGame;
</script>
</head>
<body>
	<h3>대박을 기원합니다.</h3>
	<div id = "wrapper"><div id="result"></div></div>
</body>
</html>