관련함수
Interval: 일정시간마다 반복 실행
- setInterval(function, ms);
- function: 실행시킬 함수
- ms: 시간단위 (5000 이면 5초)
timeout: 일정시간 뒤 한번 실행
- setTImeout(function, ms);
padStart,padEnd : 자리수 맞춰주는 함수
- 문자열.padStart(자리수,디폴트값)
- "1".padStart(2,"0"); === "01"
- "1".padEnd(2,"0"); === "10"
Clock
<!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>Momentom</title>
</head>
<body>
<form class="hidden" id="login-form">
<input type="text" required maxlength="15" placeholder="what is your name?"/>
<button>Log In</button>
</form>
<h1 class="hidden" id="greeting"></h1>
<h2 id="clock">00:00</h2>
<script src="js/clock.js"></script>
<script src="js/greetings.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}`;
}
getClock();
setInterval(getClock, 1000);
참조
'Language > JavaScript' 카테고리의 다른 글
| [javaScript] ToDoList 만들기 (0) | 2022.02.24 |
|---|---|
| [javaScript] 랜덤 명언& 배경 생성 (0) | 2022.02.23 |
| [javaScript] Login 처리 (0) | 2022.02.22 |
| [javaScript] 브라우저와의 연동 사용법 (0) | 2022.02.19 |
| [javaScript] 기초 문법 (0) | 2022.02.19 |
댓글