괴발개발/Javascript+JQuery

JS_타이머 기능예제

moonday 2021. 6. 21. 23:52

    /* 분:초를 출력하는 타이머를 만드는 코드를 콘솔창에 출력하도록 작성하세요.
        - 00:00
    */

<body>
  <button id="btn1" class="btn">버튼</button>

  <script>
    var second =0;
    var minute = 0;
    console.log(getTime(minute, second));

    setInterval(function(){
      second++;
      minute= second ==60? ++minute : minute;
      second= second ==60? 0 : second;
      console.log(getTime(minute,second));
    },1000);

    function addZero(num){
      return num<10? '0'+num : num;
    }

    function getTime(minute, second){
      return addZero(minute)+':' +addZero(second);
    }
  </script>
</body>

 

    /*
    - 시작버튼과 종료버튼을 만들어서, 시작버튼을 누르면 타이머가 시작되고
      종료버튼을 누르면 타이머가 종료되도록 코드를 작성하세요.
      단, 타이머는 콘솔에 출력
    */

<body>
  <button id="start" class="btn">시작</button>
  <button id="end" class="btn">종료</button>
  
  <script>
    var second =0;
    var minute = 0;
    console.log(getTime(minute, second));

    var startBtn = document.querySelectorAll('#start');
    var id;
    startBtn[0].addEventListener('click',function(){  //All은 여러개일수있음=> 배열로저장

      id = setInterval(function(){       //타이머 시작 코드
      second++;
      minute= second ==60? ++minute : minute;
      second= second ==60? 0 : second;
      console.log(getTime(minute,second));
    },1000);
    })

    var endBtn=document.querySelectorAll('#end');
    endBtn[0].addEventListener('click', function(){
      clearInterval(id);
    })

    function addZero(num){
      return num<10? '0'+num : num;
    }

    function getTime(minute, second){
      return addZero(minute)+':' +addZero(second);
    }

  </script>
</body>

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JS_history객체  (0) 2021.06.21
JS_document객체  (0) 2021.06.21
JS_요소선택  (0) 2021.06.21
JS_이벤트(event)  (0) 2021.06.21
JS_정규표현식  (0) 2021.06.21