HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>valila js</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>
<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");
const date = new Date();
function getClock() {
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
}
setInterval(getClock, 1000);
문제점 :
- 현재 시간이 계속 업데이트 되는게 아닌 호출 당시 고정된 시간만 1초 간격으로 출력
- 시계 형태가 아니라 세로로 출력됨
강의에서 한 것
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
setInterval(getClock, 1000);
정상 작동
문제점 :
1. 새로고침 하면 1초 기다려랴 시간을 알려주기 시작
2. 시간이 01, 02,가 아닌 1, 2 이렇게 표시됨
[문제1 해결] 함수 getClock을 호출하면 바로 실행
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
getClock();
setInterval(getClock, 1000);
[문제2 해결] padStart 사용
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"는 문자열에만 사용이 가능하기 때문에 "string()" 으로 감싸줌
'JavaScript' 카테고리의 다른 글
| [노마드 코더] 랜덤으로 호출되는 명언 & 배경화면 만들기 (2) | 2023.11.17 |
|---|---|
| [노마드 코더] Math(random, round, ceil, floor) (1) | 2023.11.17 |
| [노마드 코더] Padstart, 숫자 ➝ 문자열 변환 (0) | 2023.11.17 |
| [노마드 코더] Date 값 구하기(날짜, 시간) (0) | 2023.11.15 |