[JavaScript] 현재 날짜+요일+시간을 표시하는 시계

2021. 3. 5. 15:00Program/JavaScript

현재날짜와 요일, 그리고 매초 갱신되는 시계 만들기

물론 CSS로 디자인을 정리해 줘야 하지만, 위와 같은 시계를 만드는 코드

CSS로 디자인을 정리안해주면 걍 어글리 텍스트임....

const clockContainer = document.querySelector(".js-clock"),
      dateTitle = clockContainer.querySelector(".currDate"),
      clockTitle = clockContainer.querySelector(".currTime");

function getDate(){
    const date = new Date();
    const week = new Array ('[일]','[월]','[화]','[수]','[목]','[금]','[토]');
    const year = date.getFullYear();
    const month = date.getMonth()+1;
    const day = date.getDay();
    const dayName = week[date.getDay()];
    dateTitle.innerText = `
    	${year}년 ${month <10 ? `0${month}` : month}월 
        ${day < 10 ? `0${day}` : day}일 
        ${dayName}
        `;
}

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() {
    getDate();
    getTime();
    setInterval(getTime, 1000);
}

init();

 

 

 

 

ㄴㄴ