[모던자바스크립트 - JS 예제 마스터] 스탑워치 만들기

 

모던자바스크립트 - 스탑워치 만들기

 

 

스탑워치 예제

 

 

 

 

HTML 코드

<p id="display">
  0.00
</p>
<input id="start" type="button" value="start"/>
<input id="stop" type="button" value="stop"/>

 

<p>태그에 초시계를 넣어주고

각 start, stop 버튼을 input으로 만들어 줍니다. 

 

 

Javascript 코드

window.onload = function(){
  var startButton = document.getElementById("start");
  var stopButton = document.getElementById("stop");
  var display = document.getElementById("display");
  var startTime, timer;
  
  startButton.onclick = start;
  
  function start(){
    startButton.onclick = null;
    stopButton.onclick = stop;
    
    startTime = new Date();
    
    timer = setInterval(function(){
      var now = new Date();
      display.innerHTML = ((now - startTime)/1000).toFixed(2);
    }, 10);
  }
  
  function stop(){
    clearInterval(timer);
    startButton.onclick = start;
  }
}

 

 startButton.onclick = start 

 

우선 이부분.  이런식으로 함수를 실행시킬수 있구나를 처음 알았습니다.

 

 startButton.onclick = null 

 

null값을 넣어 onclick의 이벤트 속성을 제거해줍니다.

 

(비슷하게 jQuery로는 이렇게도 사용할 수 있다고 하네요)
$("#clickTest").attr('onclick', '').unbind('click');

 

 

 ((now - startTime) / 1000).toFixed(2); 

 

저는 이 부분이 많이 헷갈렸는데요.

 

일단 startTime 은 현재의 정적인 시간을 뜻합니다.

그리고 now는 현재를 기점으로 1초씩 증가하는 시간입니다.

 

 

헷갈려서 콘솔창에서 실험을 해봤는데요.

 

Console.log 실험

---

startTime을 호출하면 이렇게 현재의 정적인 시간을 알려줍니다.

 

 

 

그리고 setInterval 에 다시 new Date를 생성해서 보면

보시는 것과 같이 현재시간을 기점으로 1초씩 증가합니다.

 

 

 

Notice : 콘솔 실험은 이해를 돕기위해 setInterval 1초로 실험했습니다
실제 예제는 setInterval 0.01초입니다.

간단하게 생각해서 지금이 11시 37분 48초이고 (new Date)

초시계가 11시 37분 48, 49, 50....이렇게 증가하는 거라면 (setInterval 속의 new Date)

 

결과적으로는 now - startTime 이  0,1,2,3...이렇게 0부터 시작하는 초시계가 되는 것입니다.

 

근데 그냥 now - startTime만 하면 0,1,2,3...이 아닌, 

1000, 2000, 3001, 4001...이렇게 나옵니다.

 

 

그래서 (now - startTime) /1000을 해주면

1.001, 2, 3, 4.001....이렇게 나옵니다.

 

 

그러면 이제 마지막으로 소수점을 두자리만 보이게 해주도록

toFixed(2) 를 사용해줍니다.

 

toFixed() 는 소수점을 제어해주는 함수입니다.

 

이런식으로 소수점 자리수를 얼만큼 둘 건지 정할 수 있죠

 

 

그래서 결론적으로 ((now - startTime) / 1000).toFixed(2) 을 적용해주면

1.00, 2.00, 3.00......이런 결과가 나오게됩니다.

 

그럼 다시 예제로 돌아가 setInterval 을 1000초에서 10초로 바꾸어 주면

0.01, 0.02, 0.03... 이렇게 되겠죠? 

 

:)

 

 

깨알 정보

<input type ="button"/> 과 <button>태그의 차이는 무엇인가요?

<input type = "button"/> 태그
- <button> 에 비해서 디자인에 제약이 있다. (css 로는 디자인 가능)

<button> 태그
- 열고 닫을 수 있기 때문에 button태그 안에 텍스트 뿐만 아니라 이미지 or gif 요소를 자식으로 포함할 수 있다.
- submit 기능이 기본적으로 들어있다. 따라서 submit 하고 싶지 않다면 type = "button"을 적어줘야 한다.
- 자바스크립트 이벤트를 실행시켜야 하는 요소는 <button> 태그
- 단순한 button 기능이라면 semantic tag 인 <button> 을 사용하자.

- <button> 의 속성값
: type = "submit" 서버 전송
: type = "reset" 내용 초기화
: type = "button" 기능 구현에 사용, 자바스크립트 이벤트 실행 목적

 

 

 

 

 

참고한 사이트들

---

velog.io/@lilyoh/input-type-button-%EA%B3%BC-button-%EC%9D%98-%EC%B0%A8%EC%9D%B4

input type = button 과

ooz.co.kr/63

JQuery를 사용하여 onclick 이벤트 속성 제거하기

 

 

 

 

 

공감❤과 구독하기✔를 눌러주시면 블로거는 힘이나요😊