[Javascript] html 출력 시계 만들기 (2자리 수로..!)

html

<div class="clockWrap">
	<div class="clock" id="clock"></div>
    <div class="date" id="date"></div>
</div>

// 현재 시간과 날짜가 나오게 만들기 위한 html 소스입니다.

 

css

/* 시계 css */
.clockWrap {
    position: fixed;
    bottom: 0;
    right: 0;
}
.date {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: right;
}
.clock {
    font-size: 40px;
    font-weight: 600;
    color: #333;
}

 

javaScript

// 1. html과 연결
var clock = document.querySelector(".clock");

// 2. getTime() 함수 만들기
function getTime(){
	// 현재 시간 및 날짜
    const time = new Date();

	// 시분초
    // 시분초가 두자릿 수로 출력되기 위해서는 padStart라는 기능을 사용
    // padStart는 값이 String 일 때만 사용 가능!!!
    const hour = String(time.getHours()).padStart(2,"0");
    const minutes = String(time.getMinutes()).padStart(2,"0");
    const seconds = String(time.getSeconds()).padStart(2,"0");

	// 년월일
    const year = time.getFullYear();
    const month = time.getMonth() + 1;
    const date = time.getDate();

	// html창에 결과 출력
    document.getElementById("clock").innerHTML = hour +":" + minutes + ":"+ seconds;
    document.getElementById("date").innerHTML = year +"년 " + month + "월 "+ date + "일 ";
}

 

최종 결과

시간이 계속 흘러가는 것을 확인 할 수 있습니다 :)