js) CLOCK

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다.

function sayHello(){ //2초마다 실행하는 함수
    console.log("hello");
}

setInterval(sayHello, 5000)//2가지 파라미터를 받고 첫번째는 내가 실행하고자하는 함수, 두번째는 호출되는 간격 단위는 ms

interval은 매번 일어나는 것, ex) 매 2초마다 무슨 일이 일어나게 하는 것이다.

setInterval 함수는 인자를 2개 받는데 하난 사용할 함수를 받고 다른건 시간(ms단위로)을 받는다.

setInterval은 5초마다 계속 실행

---

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다.

function sayHello(){ //2초마다 실행하는 함수
    console.log("hello");
}

setTimeout(sayHello, 5000) //인자는 호출하려는 함수, 얼마나 기다릴지 ms 단위로 입력

Timeout은 interval과 비슷하게 생겼지만 다르다.

setTimeout도 함수와 시간을 입력한다. 하지만 setTimeout은 5초뒤에 한번 실행하고 끝난다.

---

-Date() 함수

콘솔에 콘솔에 new Date()를 치면 현재 시간을 가져온다

const date = new Date();

date.getDate() 일을 반환
date.getDay() 요일을 숫자로 반환, 일요일은 0
date.getFullyear() 년도를 반환
date.getHours() 시간 반환
date.getMinutes() 분 반환
date.getSeconds() 초 반환

---

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다.

function getClock(){
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

setInterval(getClock, 1000);

이렇게 만들면 1초마다 객체를 업데이트하면서 새로운 객체를 만들 수 있다. 이렇게 현재 시간을 콘솔에 표시 해준다.

 

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다.

function getClock(){
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

getClock()
setInterval(getClock, 1000);

밑에 getclock()를 하나를 추가하면 사이트를 새로고침 하자마자 시간이 나오게한다. 

그리고 clock.innerText로 바꿔주면 사이트 겉에 시간이 표시가 된다.

 

const clock = document.querySelector("h2#clock"); //혹은 #clock이나 clock로만 써도된다. h2 + id로 사용하는 방식을 사용했다.

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);

이 코드는 3시 56분 0초면 03시 56분 00초로 나오게 해주는 코드이다.

 

padStart는 string에 사용할 수 있는 함수이다. 앞쪽에 추가하는 함수
padEnd는 뒤쪽에 추가하는 함수
콘솔에서 "1".padStart(2, "0")으로하면 01로 출력된다. string이 2자리 수가 아니라면 앞에 0을 추가하라는 의미이다.

 

hours, Minutes, seconds는 처음에 정수형으로 오기때문에 padStart를 사용하기 위해서는 String으로 바꿔줘야한다.