[Javascript]타이머 만들기

빈지은·2023년 12월 19일
0

JS

목록 보기
10/10
post-thumbnail

🙂타이머 만들기

new Date()

new Date()생성자를 사용하여 타이머를 만들어보자!

  1. new Date()로 시작(현재)시간을 선언한다

  2. setInterval()을 사용해 1초가 지나가는 현재_시간을 선언해준다

  3. new Date(현재시간 - 시작시간)로 흐른_시간을 선언해준다

  4. 흐른_시간안에 분과 초를 빼내 html의 '.time'값에 나타내 준다.
    getMinutes() : new Date()중 '분'을 호출한다.
    getSeconds() : new Date()중 '초'를 호출한다.
    padStart() : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.
    padStart()는 문자열일 때 사용 가능하기 때문에 toString()를 사용해주었다.
    두자리가 아닌 한자리 숫자일 경우 앞에 0을 붙이기 위해 padStart를 사용하였다

const 시작_시간= new Date();

function 타이머(){
  const 현재_시간=new Date();
  const 흐른_시간=new Date(현재_시간 - 시작_시간);
  const 분=흐른_시간.getMinutes().toString().padStart(2,'0');
  const 초=흐른_시간.getSeconds().toString().padStart(2,'0');
  const time1= document.querySelector('.time');
  time1.innerText=`${분}:${초}`
}

setInterval(타이머,1000)
profile
이작품의지은이

0개의 댓글