코드네임 :
VanillaJS - Clock 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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">
<!-- form 의 기본 동작은 submit -->
<input required maxlength="15" type="text" placeholder="What is your name>" />
<!-- <button>Log in</button> -->
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
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}`;
//padStart는 String에서만 사용 가능 "1".padStart(3,"0") >> 001
}
getClock(); //화면이 처음 로드될때 바로 현재 시간을 표시하기 위함
setInterval(getClock, 1000) //3초마다 실행
// ✔ setTimeout() → 특정 시간 후 한 번만 실행
// ✔ setInterval() → 특정 시간마다 반복 실행
'🖥️Frontend > VanillaJS' 카테고리의 다른 글
| VanillaJS - Weather (0) | 2025.03.10 |
|---|---|
| VanillaJS - ToDo List (0) | 2025.03.09 |
| VanillaJS - Quotes and Background (0) | 2025.03.09 |
| VanillaJS - login 기능 (0) | 2025.03.07 |
| JS (0) | 2025.03.03 |
'🖥️Frontend/VanillaJS' Related Articles
more
