HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Momentum</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required maxlength="15"
type="text" placeholder="What is your name?"
class = "idInput" />
<input type="submit" value="Log in">
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/script.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html>clock.js
const clock = document.querySelector("h2#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)Date()
함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환한다.
.getHours,.getMinutes,.getSeconds로 시간,분,초를 불러온다.
00:00:00으로 표시하기 위해 .padStart 함수를 사용한다.
padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.
실행화면
코린이 화이팅