기초공사 (html,css,javascript)

과제-타이머만들기-setInterval 본문

academy/JavaScript

과제-타이머만들기-setInterval

에스프레소라떼 2024. 5. 12. 09:06

//

https://curryyou.tistory.com/328

 

[자바스크립트] setInterval/clearInterval 반복 중단, 재시작(재개) 방법

setInterval(콜백함수, 시간) 는 "시간(ms)"을 간격으로 "콜백함수"를 반복 호출 하는 함수이다. 애니메이션 등을 구현하다보면, 잠깐 반복을 중단했다가, 재시작하는 코드를 구현해야할 때가 있다.

curryyou.tistory.com

 

 

//코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 시작을 누르면 1초마다 숫자가 1씩 증가 -->
    <!--시작버튼만들고, setInterval -->
    <button class="play">시작</button>
    <button class="stop">중지</button>
    <button class="reset">초기화</button>

    <!-- 얘가 없으니 NaN으로 나온다. -->
    <div class="here">0</div>
  </body>
  <script>
    /*
    1.play버튼 클릭
    // 실행하는 함수를 만든다.
     function clock(m1,m2){
        $displayarea.innerText = m1 + toString() + m2
     }

    // 1초마다 clock() 함수 실행시킨다.
    timer = setInterval(clock,1000, `현재시간은 ${$displayarea.innerText}입니다.`)

    // 중지하는 함수를 만든다.
    function stop(){
      clearInterval(timer)
    }

    2. play
     $playBtn.addeventListener('click', clock())

     3.stop
     $stopBtn.addEventListener('click', stop())
    */

    //시,분,초로 나누고 숫자가 1씩 증가

    const $playBtn = document.querySelector(".play");
    const $displayarea = document.querySelector(".here");
    const $stopBtn = document.querySelector(".stop");
    const $resetBtn = document.querySelector(".reset");
    const count = parseInt($displayarea.innerText);

    let timer;
    //today = new Date()
    /*
    바깥으로빼니 시간이 안변하네.
     let current = new Date();
      const hrs = current.getHours();
      const mins = current.getMinutes();
      const secs = current.getSeconds();
    */

    //시간,분,초를 만드는 함수를 한다.
    function clock() {
      let current = new Date();
      const hrs = current.getHours();
      const mins = current.getMinutes();
      const secs = current.getSeconds();

      //$displayarea.innerText = m1 + new Data().toString() + m2;
      $displayarea.innerText = `${hrs}시 ${mins}분 ${secs}초`;
    }

    // 중지하는 함수를 만든다.
    function stop() {
      clearInterval(timer);
    }

    //초기화하는 함수를 만든다.
    function reset() {
      clearInterval(timer);
      $displayarea.innerText = "0시 0분 0초";
    }

    // $playBtn.addEventListener("click", clock);
    $playBtn.addEventListener("click", function () {
      clock();
      timer = setInterval(clock, 1000); // 1초마다 계속 업데이트
    });
    $stopBtn.addEventListener("click", stop);
    //초기화
    $resetBtn.addEventListener("click", reset);
  </script>
</html>

 

Issue

 

저작자표시

'academy > JavaScript' 카테고리의 다른 글

수업 0512 - 프론트엔드, 백엔드 요청응답  (0) 2024.05.12
오픈API  (0) 2024.05.12
과제중- replaceChild 예제  (0) 2024.05.10
과제-board.html- 수정까지 되었지만 - 등록이 하나만 되는 코드  (0) 2024.05.10
복습-board.html - Array-fill-map  (0) 2024.05.06
'academy/JavaScript' Related Articles more