[17 Project] Stopwatch

 

[새로 알게된 것]

 

클론코딩만 하니 실력이 전혀 늘지가 않아 직접 알고리즘을 연구하며 하나씩 만들었다.

아직 코드는 엉망이지만 내 손으로 뭔갈 만드는 재미가 있다. 이제야 제대로 마주하는 기분이다!! 진짜 재밌다.

 

1. 리팩토링 하기

 

2. 숫자가 바뀌는걸 위에서 아래로 돌아가도록 구현 해보기

 

 

 

[내가 짠 코드]

<script>
    
      var seconds = 00;
      var mins = 00;
      var hours = 00;
     
      var appendSec = document.getElementById("sec");
      var appendMin = document.getElementById("min");
      var appendHour = document.getElementById("hour");

      var startBtn = document.getElementById("btn_start");
      var stopBtn = document.getElementById("btn_stop");
      var resetBtn = document.getElementById("btn_reset");
      var interval;
      

      startBtn.onclick = function() {
        clearInterval(interval); //use clearInterval for count speed.
        interval = setInterval(startTimer, 1000);

        function startTimer() {
          seconds++;
          if (seconds <= 9) {
            appendSec.innerHTML = "0" + seconds;
          }
          if (seconds > 9) {
            appendSec.innerHTML = seconds;
          }
          if (seconds > 59) {
            mins++;
            appendMin.innerHTML = "0" + mins;
            seconds = 0;
            appendSec.innerHTML = "0" + 0;
          }
          if (mins > 9) {
            appendMin.innerHTML = mins;
          }
          if (mins > 59) {
            hours++;
            appendHour.innerHTML = "0" + hours;
            mins = 0;
            appendMin.innerHTML = "0" + 0;
          }
        }
        stopBtn.onclick = function() {
          clearInterval(interval);
        }
        resetBtn.onclick = function() {
          clearInterval(interval);
          seconds = "00"; //숫자열을 사용하면 0으로 나옴
          mins = "00";
          hours = "00";
          appendSec.innerHTML = seconds; //innerHTML로 문자열 불러오기 때문.
          appendMin.innerHTML = mins;
          appendHour.innerHTML = hours;

        }
      }
    
  </script>

 

 

 

 

 

참고 : mikkeg