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>
'프로그래밍 > Javascript' 카테고리의 다른 글
| How to detect browser. (0) | 2018.07.23 |
|---|---|
| How to create dynamic a form! (0) | 2018.06.07 |
