⏱️ 스톱워치 제작하기 | setInterval , String.padStart

TIL 2022. 9. 5. 22:22

1. semantic html tag 작성

 <body>
    <main>
      <h1>⏱️STOPWATCH</h1>
      <section class="stopwatch_interface">
        <span id="screen">00:00:00</span>
        <button id="btn">
          <span>시작</span>
        </button>
      </section>
    </main>
  </body>

2. CSS 작성

*{
  margin : 0;
  padding : 0;
  box-sizing: border-box;
}
main{
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  width : 551px;
  border : 1px solid #ccc;
  border-radius : 10px;
}
main h1{
  font-size : 15px;
  color :#4285f4;
  font-weight : lighter;
  border-bottom : 1px solid #4285f4;
  padding : 10px;
}
main section.stopwatch_interface{
  font-size : 55px;
  display : flex;
  padding : 30px 0;
}
main #screen{
  flex-basis : 80%;
  text-align : center;
}
main #btn{
  flex-basis : 20%;
  margin-right: 30px;
  border : 1px solid #ccc;
  border-radius : 10px;
}
main #btn.active{
  background-color : #4285f4;
  color : white;
}

3. JS 작성

1. button 클릭 시 active 클래스를 붙여준다.

button.classList.contains("active") ? button.classList.remove("active") : button.classList.add("active")

위의 코드를 toggle 메서드를 사용해 아래와 같이 쓸 수 있다.

2. cs를 100/1초 마다 1씩 올려준다.

screen 화면에는 m : s : cs 가 띄워져야 한다.

m = 분

s = 초

cs = 센티세컨드(100분의 1초를 가리킨다)

setInterval, clearInterval 사용하기

setInterval 함수를 사용하면 내가 원하는 시간 간격을 두고 함수를 실행할 수 있다. clearInterval 함수는 반복되어 실행되고 있는 setInterval 함수를 제거할 때 사용한다.

setInterval(함수, 시간 간격), output : 식별자 timerId

- 1000이 1초를 뜻한다.

100/1초마다(10) cs를 +1 해주면 된다.

setInterval은 고유한 timerId를 return한다. setInterval을 변수에 넣어두면 변수에는 timerId가 들어간다. 나중에 clearInteval의 매개변수로 timerId(변수)를 넘겨주면 setInterval 함수가 제거된다.

3. padStart 사용하기

String.padStart(targetLength, [,padString])

-targetLength

목표 문자열 길이

-padString(optional)

빈 문자열을 채울 문자

output : 시작점부터 주어진 문자열로 채워 목표 길이를 만족하는 문자열

m , s, cs 를 두자리 채울 때(00:00:00) 만약 m, s, cs 가 한자리라면 padStart(2, "0") 을 사용하여 두자리 문자열로 채울 수 있다. 2자리가 될 때까지 "0" 문자열을 앞에서부터 채워 자릿수를 채운다.

const button = document.getElementById("btn");
const screen = document.getElementById("screen");

let timer;

button.addEventListener("click", () => {
  button.classList.toggle("active");

  let m = 0;
  let s = 0;
  let cs = 0;

  if(button.classList.contains("active")){
    button.innerText = "멈춤";
    timer = setInterval(() => {
      cs++;
      if(cs >= 100){
        cs = 0;
        s++;
      }
      if(s >= 60){
        s = 0;
        m++;
      }
      if(m >= 60){
        m = 0;
      }
      screen.innerText = `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(cs).padStart(2, "0")}`;
    }, 10);
  } else {
    button.innerText = "시작";
    clearInterval(timer);
    screen.innerText = "00:00:00";
  }
});

저작자표시 비영리 변경금지

'TIL' 카테고리의 다른 글

🎨 ubuntu \| shell theme 바꾸기 (0)	2022.09.15
Git , Github \| 깃과 깃허브 마스터 (0)	2022.09.14
🍔 햄버거 버튼 제작하기 (0)	2022.09.03
📗 모던 자바스크립트 Deep Dive \| 이벤트 [이벤트 핸들러] (0)	2022.05.26
📗 모던 자바스크립트 Deep Dive \| #2 DOM [요소 노드 선택하기] (0)	2022.05.25

ABOUT ME

🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

1. semantic html tag 작성

2. CSS 작성

3. JS 작성

'TIL' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. semantic html tag 작성

2. CSS 작성

3. JS 작성

'TIL' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바