728x90
★ Timer
- 타이머 생성
- 1. number setTimeout(함수, 시간) : 1회성 타이머
btn1.onclick = m1;
function m1() {
//3초 후에 f1을 호출해라!
//setTimeout(f1, 1000);
f1();
}
function f1() {
// alert('따르릉');
txt1.value = (new Date()).toLocaleTimeString();
setTimeout(f1, 1000); //재귀 호출 + 무한 루프
}- 2. number setInterval(함수, 시간) : 반복성 타이머
btn2.onclick = m2;
function m2() {
setInterval(f2, 1000);
}
function f2() {
// alert('띵동~');
txt2.value = (new Date()).toLocaleTimeString();
}- 실행 결과
- 3. 스톱 워치
var n = 1;
btn3.onclick = m3;
function m3() {
setInterval(f3, 1000);
}
function f3() {
txt3.value = n;
n++;
}- 실행 결과
- 타이머 종료
- 1. clearTimeout(id)
- 2. clearInterval(id)
btn4.onclick = m4;
function m4() {
clearInterval(timer);
//n = 0;
}- 스톱워치 - 2
var n = 1;
var timer = 0;
btn3.onclick = m3;
function m3() {
if(timer == 0) {
timer = setInterval(f3, 10);
console.log(timer);
}
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
clearInterval(timer);
// n = 0;
timer = 0;
}- 실행 결과
- 배열을 이용한 타이머
var n = 1;
var timer = 0;
var timerlist = [];
btn3.onclick = m3;
function m3() {
// if(timer == 0) {
// timer = setInterval(f3, 10);
// console.log(timer);
// }
timer = setInterval(f3, 10);
timerlist.push(timer);
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
// clearInterval(timer);
// // n = 0;
// timer = 0;
//순차적으로 중지
// clearInterval(timerlist.pop());
//일괄 중지
for (var i=0; i<timerlist.length; i++) {
clearInterval(timerlist[i]);
}
}
■ 기초 코드
<style>
fieldset {
border : 1px solid #777;
padding : 20px;
margin : 20px;
width : 300px;
}
</style>
<body>
<h1>타이머</h1>
<form name="form1">
<fieldset>
<input type="button" value="확인" name="btn1">
<input type="text" name="txt1">
</fieldset>
<fieldset>
<input type="button" value="확인" name="btn2">
<input type="text" name="txt2">
</fieldset>
<fieldset>
<input type="button" value="확인" name="btn3">
<input type="text" name="txt3">
</fieldset>
</form>
</body>
■ 이미지를 이용한 타이머 ex)
var cat = document.images['cat'];
var m = 1;
var ctimer = 0;
cat.onclick = m5;
function m5() {
if(ctimer==0) {
ctimer = setInterval(f5, 100);
} else {
clearInterval(ctimer);
ctimer = 0;
}
}
function f5() {
m++;
if(m>9) m = 1;
cat.src = 'images/catty0' + m + '.png';
}- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 29 - Hoisting, Object (0) | 2023.04.25 |
|---|---|
| JAVASCRIPT STEP 28 - Variable (0) | 2023.04.25 |
| JAVASCRIPT STEP 26 - FORM 예제 (0) | 2023.04.25 |
| JAVASCRIPT STEP 25 - FORM2 (0) | 2023.04.25 |
| JAVASCRIPT STEP 24 - FORM (0) | 2023.04.24 |
