본문 바로가기

프로그래밍/Javascript

Timer 구현하기

1. 기능

 - HTML에서 특정 시간 카운트 다운

 - HTML에 카운트 되는 시간 출력


2. Code

 1) HTML Source

 <div id="timerTxt"></div> <!-- 타이머를 노출할 Div -->


 2) Javascript Source

var timerId;

var timerSec = 3;


window.onload= function() {

timerId = setInterval('timer()', 1000);

}


function timer() {

var min = Math.floor(timerSec / 60)

var sec = timerSec % 60;

var msg = (min < 10 ? "0"+ min : min) + ":" + (sec < 10 ? "0"+ sec : sec);

timerSec--;

if (timerSec < 0) { /* time End*/

msg += "<br>Timer End!"

clearInterval(timerId);

}

document.getElementById("timerTxt").innerHTML = msg;

}


 3) Full Source

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>타이머 샘플 소스</title>

</head>

<body>

<div id="timerTxt"></div>


<script type="text/javascript">

var timerId;

var timerSec = 3;

window.onload= function() {

timerId = setInterval('timer()', 1000);

}

function timer() {

var min = Math.floor(timerSec / 60)

var sec = timerSec % 60;

var msg = (min < 10 ? "0"+ min : min) + ":" + (sec < 10 ? "0"+ sec : sec);

timerSec--;

if (timerSec < 0) { /* time End*/

msg += "<br>Timer End!"

clearInterval(timerId);

}

document.getElementById("timerTxt").innerHTML = msg;

}

</script>

</body>

</html>