javascript 함수중에 setTimeout 함수가 있는데요. 이는 사용자가 지정한 시간후에 해당 기능을 수행하는 함수 입니다. 그래서 이 기능을 이용하여실시간 시계 프로그램을 만들어 보겠습니다.
윈도우 우측 하단의 시계나 웹사이트에서 실시간으로 동작하는 시계를 본적이 있으실텐데요. 이 시계를 Javascript와 JSP를 이용해서 구현할 수가 있습니다. 어려워 보이지만 일전시간마다 시간을 set하는 함수를 구축하고 이를 일정 주기마다 실행만 해주시면 끝입니다. 한번 예제를 통해 구현해 보겠습니다.
1. setTimeout 기능
지정된 함수나 코드를 실행시키는 함수로 매개변수가 2개가 요구되며 setTimeout(실행될 펑션, 시간) 다음과 같이 변수를 지정하면 해당 시간이 지난후 지정된 함수가 호출됩니다.
비슷한 메소드로는 setInterval이 있으며 setTimeout은 한번만 수행되나 setInterval은 해당 펑션을 계속 반복하는 특징이 있습니다.
2. 예제
<script type="text/javascript"> function go_time(){ var now = new Date(); var year = now.getFullYear(); //년 var month = now.getMonth(); //월 var day = now.getDay(); //일 var hour = now.getHours(); //시 var min = now.getMinutes(); //분 var sec = now.getSeconds(); //초 document.getElementById("clock").innerHTML = year+"년 "+ month+"월 "+day+"일 "+hour+":"+min+":"+sec //id가 clock인 html에 현재시각을 넣음 setTimeout("go_time()", 1000); //1초마다 해당 펑션을 실행함. } </script> <body onload="go_time()"> <div id="clock"></div> </body>
Date 함수를 통해 현재 날짜를 변수에 저장합니다. 그리고 clock이라는 id를 가진 div에 현재시간이 저장된 변수를 innerHTML을 통해 저장시킵니다. 그러면 JSP상의 DIV에 현재 날짜가 출력되게 됩니다. 그리고 setTimeout이 해당 go_time()함수를 1초마다 수행하기 때문에 변한 현재시간이 계속해서 출력되게 됩니다.
이렇게 setTimeout 기능은 매우 유용하며 실제 개발에서도 많이 쓰이는 함수니 잘알아두시면 좋겠습니다.
답글 남기기