목표
시간을 보고 싶은데 집에 시계가 없어...
아무래도 내가 직접 만들어야겠군.
코드
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>TICK-TOCK</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="clock">33:33:33</h1>
<script src="app.js"></script>
</body>
</html>/* style.css */
html, body{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body{
background-color: rgba(0,0,0,0.8)
}
#clock{
font-size: 100px;
color: tomato;
cursor: default;
transition: all 0.5s ease;
}
#clock:hover{
text-shadow:0 0 33px black;
}// app.js
clock = document.querySelector("#clock")
function formatTime(time){
return String(time).padStart(2, '0')
}
function tickTock(){
const date = new Date()
const hour = formatTime(date.getHours())
const min = formatTime(date.getMinutes())
const sec = formatTime(date.getSeconds())
clock.innerText = `${hour}:${min}:${sec}`
}
setInterval(tickTock, 1)실행 결과
