이번 시간에는 자바스크립트에서
Window 객체 함수(setTimeout, setInterval)를 활용하여 재밌는 이벤트들을 만들까 합니다
실제로도 많이 쓰이니 잘 활용하시면 좋을것 같습니답~! ㅎㅎ
먼저 결과 예시 화면을 보자면 아래와 같습니다.
3초 뒤라는 버튼을 누르면 3초 뒤에 '꽝' 이라는 메시지가 나옵니다.
옆에 3초 마다 버튼을 누르면 '꽝' 이라는 메시지가 3초마다 나오고
중지를 누르면 안나오게 됩니다.
밑에 현재 시간 버튼을 누르면 현재 시간이 나옵니다.
그리고 시계 동작을 누르면 1초 마다 시간이 움직이고
멈춤 버튼을 누르면 시계 동작이 스톱됩니다.
아래에 예제 소스가 있으니 참고하십시요~
<script type="text/javascript">var go=function(){window.alert("꽝!");}function showTime(){//현재 시간 구하기=>Date 객체 활용var today = new Date();var str="";str+=today.getHours()+"시 ";str+=today.getMinutes()+"분 ";str+=today.getSeconds()+"초 ";//아이디가 msg인 곳에 현재 시간정보를 출력var obj=document.getElementById('msg');obj.innerHTML="<h2 style='color:blue'>"+str+"</h2>";}</script><body><button onclick="obj1=window.setTimeout(go,3000)">3초 뒤(setTimeout)</button><!--변수1=window.setTimeout(함수명,숫자); // 특정 시간 경과 뒤 한번 함수를 호출함window.clearTimeout(변수1)변수2=window.setInterval(함수명,숫자); // 주기적으로 함수를 호출함window.clearInterval(변수2);--><button onclick="obj2=window.setInterval(go,3000)">3초 마다(setInterval)</button><button onclick="window.clearInterval(obj2)">중지(clearInterval)</button><button onclick="showTime()">현재 시간</button><button onclick="timer=setInterval(showTime, 1000)">시계 동작</button><button onclick="clearInterval(timer)">시계 멈춤</button><hr color="red"><p></p><div id="msg"></div>
댓글 없음:
댓글 쓰기