* 당첨번호 / 총번호 : 랜덤으로 뽑기 (중복제거)*
* 결과값인 배열을 하나씩 시간지연 출력 *
<!DOCTYPE html>
<html>
<head>
<title>번호추첨</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<link type="text/css" href="/css/design.css" rel="stylesheet" />
<style type="text/css">
body
{
background-image:url('/images/bglotto.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
<script type="text/javascript">
/* 배열에 랜덤값 얻기 */
function shuffleRandom(){
$("#resultBox").empty();
$("#resultBox2").empty();
$("#resultBox3").empty();
// 결과 담을 배열
var resultArray = [];
var n = $("#resultMax").val(); // 당첨자수
var total = $("#total").val(); // 총인원
var temp; // 난수 임시로 담을 변수
var dupCheckFlag = 0; // 중복체크 Flag (0,1)
for(var i = 0; i < n ; i++){ // 필요한 당첨자수 많큼 루프
temp = Math.floor(Math.random() * total) + 1; // 난수 생성 (+1 은 0 제외)
for(var y = 0; y < i ; y++){ // 기존 배열 값들 0 부터 i 번째(현재) 전까지
if(resultArray[y] == temp){ // 중복체크 _ 같은것이 있다면,
i = i - 1; // 현재 배열위치 i 에서 한칸 앞 위치를 가져간다. *( i++ 가 되니 미리 i-1해준다.) 결국은 i값이 증가되지 않는것.
dupCheckFlag = 1; // 배열에 값을 넣지 않기 위해 중복체크 플래그 값 설정해주고
}
}
if(dupCheckFlag == 0){ // 중복된 값이 아니면 난수를 배열 i 번째 넣어주고.
resultArray[i] = temp;
} else {
dupCheckFlag = 0; // 중복된 값이면 i -1 번째 그대로 간다.
}
}
for(var k = 0; k < n ; k++){ // * 화면 출력시 10명씩 한줄에 & setInterval 시간지연 .. 번호 하나씩 출력
fn_view(resultArray[k], k); //(결과값, 순서)
}
} // end of shuffleRandom
function fn_view(p,k){
var x = 1000; // setInterval 시간계산용 ms
if(k < 10){ // 첫번째 줄. 1~10개까지
var varTimer = setInterval(function(){ // ***시간지연 함수
$("#resultBox").append(p);
if(k !=9){
$("#resultBox").append(" , ");
}
clearTimeout(varTimer); // setInterval() 메소드의 작동을 정지하기 위해서 clearInterval() 메소드를 사용한다.
}, x*k); // ***지연시간 Set ( 1000 * k 가 순번 증가값이므로 지연시간이 1초씩 늘어난다. )
} else if(k <20){
var varTimer = setInterval(function(){
$("#resultBox2").append(p);
if(k !=19){
$("#resultBox2").append(" , ");
}
clearTimeout(varTimer);
},x*k);
} else{
var varTimer = setInterval(function(){
$("#resultBox3").append(p);
if(k !=29){
$("#resultBox3").append(" , ");
}
clearTimeout(varTimer);
},x*k);
}
} //end of fn_view
</script>
</head>
<body>
<div style="font-size: 20px">
<p style="font-size: 40px;margin-left: 100px; margin-top: 50px;color: white">오픈스마트 플랫폼 경품 추첨</p>
<div style="margin-top: 100px">
<span style="margin-left: 50px;color: white"> 참석자수:</span><input type="text" id="total" />
<span style="margin-left: 30px;color: white"> 당첨인원:</span><input type="text" id="resultMax"/>
<input type="button" id="lottoResult" value="추첨하기" style="margin-left: 20px" onclick="shuffleRandom()"/>
</div>
<div id="resultBox" style="font-size: 30px; margin-left: 50px; margin-top: 60px;color: white"></div>
<div id="resultBox2" style="font-size: 30px; margin-left: 50px; margin-top: 25px;color: white"></div>
<div id="resultBox3" style="font-size: 30px; margin-left: 50px; margin-top: 25px;color: white"></div>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2014.06.20 |
|---|---|
| 정규식으로 특정문자 제거 (0) | 2014.05.09 |
| 자바스크립트 정규식을 이용한 체크 (0) | 2014.01.18 |
| 자주 쓰이는 자바스크립트 공통함수 모음 (0) | 2014.01.18 |
| 키코드 (0) | 2013.12.27 |