Interval
매번 일어나는 일
setInterval 함수
setInterval(arg1, arg2) : arg1(실행하고자하는 function), arg2(호출되는 function 간격을 몇 ms으로 할지)
ex) setInterval(sayHello, 5000); : 5초에 한번씩 sayHello 함수를 호출
Timeouts and Dates
setTimeout 함수
setTimeout(arg1, arg2) : arg1(실행할 function), arg2(얼마나 기다릴지 ms)
ex) setTimeout(sayHello, 5000); : 5초후에 sayHello 함수를 한번만 호출
일요일 : 0
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>Momentum App</title>
</head>
<body>
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="what is your name?" />
<input type="submit" value="Log in" />
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id="clock"></h2>
<script src="js/greetings.js"></script>
<script src="js/clock.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);
padStart(2, "0") : 자리수가 2자리가 되어야하는데 2자리가 아니면 앞에 부터 0으로 채움
padEnd(2, "0") : 자리수가 2자리가 되어야하는데 2자리가 아니면 뒤에서 부터 0으로 채움
- 1초마다 getClock() 함수가 호출되어 시계 처럼 보임
참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] application 만들기 3 (Random) (1) | 2024.01.02 |
|---|---|
| [Javascript] application 만들기 1 (LOGIN) (1) | 2023.12.28 |
| [Javascript] 기초 4 (event, CSS) (0) | 2023.12.13 |
| [Javascript] 기초 3 (HTML element 접근) (0) | 2023.12.13 |
| [Javascript] 기초 2 (함수, 조건문) (0) | 2023.12.12 |
