스톱워치를 만들었다

최근 도트 설치 에서 공부하고 있습니다만,
복습과 이해를 돕기 위해 출력합니다.

JavaScript로 스톱워치를 만들자

만드는 방법의 절차

우선 HTML로 골자를 만든다.

CSS로 디자인을 어느 정도 정돈한다.

JavaScript로 기능을 만들어 보세요.

이미지는 만든 스톱워치.

아래에 스톱워치를 만드는데 필요한 기능의 메소드를 정리해 둡니다.

방법 목록

padStart()

setTimeout()

clearTimeout()

Date.now()

Substring()

classList.add()

padStart()

결과의 캐릭터 라인이 지정한 길이가 되도록 연장한다.
스톱워치의 시간 표시 부분은 00:00,000 이었기 때문에, 여기에 사용.

001.js

     const m = String(d.getMinutes()).padStart(2,'0');
     const s = String(d.getSeconds()).padStart(2,'0');
     const ms = String(d.getMilliseconds()).padStart(3,'0');

setTimeout()

특정 처리를 일정 시간 후에 실행
아래에서는 10m초 후에 countUp()을 실행합니다.

002.js

     timeoutId = setTimeout(() => {
         countUp();
     }, 10);

clearTimeout()

타이머는 기동하면 움직이지 않기 때문에 정지시킨다
setTimeout()의 반환값을 clearTimeout()의 인수에 걸친다.

(이 부분 제대로 이해하지 않기 때문에 요 다시 공부)

002.js

 clearTimeout(timeoutId);
     }, 10);

왜. w()

지정된 시간부터 경과 시간을 반환합니다.

Substring()

캐릭터 라인내의 지정된 범위의 부분 캐릭터 라인을 돌려준다

classList.add()

그 외에 classList.remove()나 classList.contains() 등
button 요소의 경우 disabled 속성을 사용할 수있었습니다.
그러나 div 요소에서는 사용할 수 없으므로 클래스를 만들고이 메서드를 사용합니다.

002.js

 function setButtonStateStopped(){
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.remove('inactive');

 }

index.html

      <div class="btn" id="start">Start</div>
      <div class="btn" id="stop">Stop</div>
      <div class="btn" id="reset">Reset</button>
 }

만든 감상

도트 설치를 사용하면, 1개 1개의 레슨 시간이 짧고,
부담없이 메소드를 망라할 수 있기 때문에 편한구나~라고 생각합니다.

0부터 프로그래밍을 하는 사람에게는 추천할 수 없습니다만,
어느 정도의 지식이 있지만 웹 서비스를 혼자 만들 수 있는 수준이 아니라는 사람에게는 도트 설치를 추천합니다.

(0부터 프로그래밍을 하고 싶은 사람은 Progate가 좋다고 합니다.넷 정보입니다만)