Making a JS Clock

김서하·2021년 4월 20일
0
setInterval(function, 1000)
 -> 함수들을 몇초 간격으로 실행할 것인지에 관한 함수
 
clockTitle.innerHTML = 
`${hours < 10 ? `0${hours}` : hours} :
${minutes < 10 ? `0${minutes}` : minutes} :
${seconds < 10 ? `0${seconds}` : seconds}`;
삼항 조건 연산자 => 미니if 를 사용하여 false/true 이용가능

아니면 한번에 hours,minutes,seconds 한번에 고치는 함수
function formatTime(hms, limit = 10){
 if(hms < limit){
 result = `0${hms}`;
 } else {
 result = `${hms}`;
 }
 return result;
 }
 
 clockTitle.innerText = 
 `${formatTime(hours)}:${formatTime(minutes)}:
  ${formatTime(seconds)}`;
  
***총 코드***
const clockContainer = document.querySelector(#js-clock),
clockTitle = colckContainer.querySelector("h1");

function getTime(){
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  clockTitle.innerText = 
 `${hours < 10 ? `0${hours}` : hours} :
 ${minutes < 10 ? `0${minutes}` : minutes} :
 ${seconds < 10 ? `0${seconds}` : seconds
 }`;
}

function init(){
 getTime();
 setInterval(getTime, 1000);
}

init();







profile
개발자 지망생 서하입니당

0개의 댓글