웹페이지

JAVASCRIPT STEP 27 - Timer

2023. 4. 25. 14:47
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;
}
  • 실행 결과

스톱워치 - 2

  • 배열을 이용한 타이머
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
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 29 - Hoisting, Object
  • JAVASCRIPT STEP 28 - Variable
  • JAVASCRIPT STEP 26 - FORM 예제
  • JAVASCRIPT STEP 25 - FORM2
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 앱개발자
  • css
  • 정보보안전문가
  • 웹페이지
  • 데이터베이스
  • ajax
  • 백엔드
  • 자바
  • React
  • jsp
  • IT자격증
  • 프론트엔드
  • 알고리즘
  • IT자격증공부
  • IT개발자
  • 웹개발
  • java
  • 정보처리기사
  • 코딩테스트
  • 개발블로그
  • it
  • 정보처리기사필기
  • JavaScript
  • 웹개발자
  • DB
  • html
  • 백준
  • DBA
  • jquery
  • 개발자

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 27 - Timer
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.