#5.1~5.3

Timeouts and Dates

const clock = document.querySelector(".clock");


function liveClock() {
const date = new Date();
if (date.getSeconds() < 10)
{
clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:0${date.getSeconds()}`;
} else
{
clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
}

setInterval(liveClock, 1000);const clock = document.querySelector(".clock");


function liveClock() {
const date = new Date();
if (date.getSeconds() < 10)
{
clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:0${date.getSeconds()}`;
} else
{
clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
}

setInterval(liveClock, 1000);

PadStart

const clock = document.querySelector("#clock");

function getClock() {
const date = new Date();
const hours = String(date.getHours()).padStart(2,"0");
const minutes = String(date.getMinutes()).padStart(2,"0");
const seconds = String(date.getSeconds()).padStart(2,"0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);
//setTimeout(sayHello, 5000);

padStart : string뒤에 쓸수 있고 빈 공간 두번째 인수로 앞에서부터 채움.

Recap

const date = document.querySelector("h2#date");

function getDate() {
const dateclock = new Date();
const years = String(dateclock.getFullYear()).padStart(4, "0");
const months = String(dateclock.getMonth()).padStart(2, "0");
const days = String(dateclock.getDate()).padStart(2, "0");
date.innerText = `${years}-${months}-${days}`;
}

function getClock() {
const dateclock = new Date();
const hours = String(dateclock.getHours()).padStart(2, "0");
const miniutes = String(dateclock.getMinutes()).padStart(2, "0");
const seconds = String(dateclock.getSeconds()).padStart(2, "0");
if (hours === "00" && miniutes === "00" && seconds === "00") {
getDate();
}
clock.innerText = `${hours}:${miniutes}:${seconds}`;
}

getDate();
getClock();
setInterval(getClock, 1000);