기본 세팅
<h2 id="clock">00:00</h2>
const clock = document.querySelector("h2#clock");
Intervals
interval : "매번" 일어나야 하는 무언가를 말한다.
setInterval(실행하고자 하는 function, 호출되는 function간격 {ms})
ex. setInterval(sayHello, 5000) - 매 5초마다 실행하는 것!
function sayHello() {
console.log("hello");
}
setInterval(sayHello, 5000);
Timeouts and Dates
- Timeout 도 마찬가지이다.
function sayHello() {
console.log("hello");
}
setTimeout(sayHello, 5000);
- Date
▶ 이러한 setTimeout()의 특징때문에 → 뭔가를 계속해서 다시 실행하고 싶을 땐, setInterval()를 사용하게 된다.
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
setInterval(getClock, 1000);
콘솔창으로 실행해보면, new Date object들이 새롭게 업데이트되는 걸 보게 될 것이다.
▶ 1초동안은 00:00:00 을 표시하고 그 뒤에 시간이 갱신되는 점
★ website가 load되자마자 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);
▶ 00:00:00 없이 바로 시간을 볼 수 있다는 점
브라우저 창에 띄우고자 실행하려고 하면,
<h2 id="clock">00:00:00</h2>
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);
PadStart
단, 초가 0,1,2,이 되는 문제점이 있다. 01.02,03...이렇게 하고 싶다........
위 문제점을 해결할 수 있는 건. padStart()이다. --- string에 쓸 수 있는 function ---
ex. "1".padStart(2,"0") > "01" 의 결과가 나온다.
길이가 1인 string. padding을 써서 string의 시작부분을 늘려야 한다 ( 늘려야 한다는 문자열 길이 , 길이가 2가 되지 않는 다면 앞쪽에 "0"을 추가한다 )
ex. "hello". padStart(10, x) > xxxxxxxxxxhello 의 결과가 나온다.
cf. padEnd()는 뒤쪽에 추가한다는 것도 있다.
그럼 다시 코드에 적용하면
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);
★ number -> string으로 바꿀 수 있는 방법 ★
new Date().getHours() > 16
String(new Date().getHours()) > "16" 즉. String() 괄호안에 string으로 바꾸고 싶은 number을 입력한다.
D-day 계산 방법 참고자료 https://velog.io/@dev-hannahk/js-d-day
[JavaScript] D-day 계산
⏲️ D-day 계산해보기 🕮 개념정리 1. Date 1) Date 생성자 Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성한다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리
velog.io
과제 중 나머지 값 연산자 : % 이용하기
'개발언어 > JavaScript' 카테고리의 다른 글
To Do List 만들기 (0) | 2021.09.03 |
---|---|
Quotes and Background 명언 만들기 (0) | 2021.09.02 |
Login만들기 (0) | 2021.09.01 |
JavaScript - 브라우저(Document, Elements, Events) (0) | 2021.08.26 |
Conditionals : 조건문 (if,else) (0) | 2021.08.25 |