Clock

양효빈·2023년 4월 10일
0

javascript

목록 보기
7/7

intervals

매번 일어나야하는 무언가

setInterval

두가지 argument를 받음
실행하고자 하는 function, function간격을 몇 ms로 할지

const clock = document.querySelector("#clock");

function sayHello() {
  console.log("Hello");
}

setInterval(sayHello, 5000);

sayHello 기능을 매 5초마다 실행

5초 지날때마다 console에서 Hello가 뜸

Timeout

바로 실행하는걸 원하지 않을때 사용

setTimeout

두가지 argument를 받음
실행하고자 하는 function, 실행까지 얼마나 기다릴지 ms단위

const clock = document.querySelector("#clock");

function sayHello() {
  console.log("Hello");
}

setTimeout(sayHello, 5000);

5초 후에 console창에 Hello가 뜸

Date

javascript가 이미 가지고 있는 object

new Date()

현재 시간 가져옴

Date 매 초 호출

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

getClick();
setInterval(getClock, 1000);

시작하자마자 getClick호출하고, 매 초 현재 시간 호출

모니터에 표시

const clock = document.querySelector("#clock");

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

setInterval(getClock, 1000);

padStart

string에 쓸 수 있는 function

  • 초 단위에 1,2,3으로 뜨는걸 01,02,03으로 표시하고 싶음
"1".padStart(2,"0")

string의 길이를 2개, 1개일때는 앞에 0을 붙일것.

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}`;
}

padEnd

string 뒤에 붙임

profile
코딩하는 디자이너

0개의 댓글