Lottery in javascript / 자바스크립트로 경품추첨기 만들기

	

 <style>
  body{font-size:9pt;}
  #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} 
 </style>
 <script> 
  var panel;
  var nTimerID;
  var labTotal;
  var nTotalMember;
  window.onload=function(){
   this.init();// 요소 초기화 실행.   
   this.initEventListener();// 이벤트 초기화 실행. 
  }    
  function init(){// 요소 초기화.   
   this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다.
   this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다.
   this.labTotal = document.getElementById("lab_total");
   this.nTotalMember = 0;   
  }    
  function initEventListener(){// 이벤트 초기화.
   var btnStart = document.getElementById("btn_start");
   btnStart.addEventListener("click", function(){
    startTimer();
   },false);   
   var btnStop = document.getElementById("btn_stop");
   btnStop.addEventListener("click",function(){
    stopTimer();
   },false);   
  }  
  function startTimer(){  
   if(this.nTimerID==0){    
    this.nTotalMember = Number(this.labTotal.value);//입력된 참여인원수를 구해옵니다.    
    this.resetPanelStyle();// 타이머 시작시 #panel의 글자색을 초기화 시켜 줍니다.   

    this.nTimerID = setInterval(this.createNumber,20);// 0.2초에 한번씩 createNumber()함수를 실행시켜 줍니다.
   }
  }    
  function stopTimer(){
   if(this.nTimerID){
    clearInterval(this.nTimerID);// createNumber()함수 호출하는 타이머를 멈춥니다.
    this.nTimerID = 0;    
    this.showWinner();//출력효과 추가.
   }
  }    
  function createNumber(){ 
   var nNum = 1+Math.floor(Math.random()*this.nTotalMember);// 랜덤하게 1에서 참여인원수 사이의 숫자를 만들어 냅니다.   
   this.panel.innerHTML = nNum;//만들어진 숫자를 innerHTML에 대입시켜 줍니다.   
   this.panel.style.fontSize = 100+(Math.random()*100)+"px";// 폰트 크기를 100~200으로 랜덤하게 설정해줍니다.
  }     
  function showWinner(){ // 출력효과 추가.  
   this.panel.style.color = "#ff0000";// 당첨자를 알리기 위해서 #panel의 글자색과 크기를 변경시켜줍니다. 
   this.panel.style.fontSize = "200px"; 
  }    
  function resetPanelStyle(){
   this.panel.style.color = "#000000";// 출력패널의 스타일을 초기화 시켜준다. 
  }
 </script>

 <div>
  <h4>경품추첨기</h4> 
  <div id="panel"> 1
   <!-- 이곳에 숫자가 출력됩니다. -->
  </div> 
  <div id="nav">
   참여인원 : <input type="text" id="lab_total" value="100">
   <button id="btn_start">start</button>
   <button id="btn_stop">stop</button>
  </div>
 </div>

---------------------------------------------------------------------------------------------

Lottery

1

The Number of Participants :