JavaScript 실시간 시간 출력하기

2023. 8. 9. 12:53·JavaScript
728x90
반응형
SMALL
🟰시간 출력하기에 필요한 개념

📌 어떠한 요소 안에 String타입의 변수를 출력할때
☀️ 백틱이라는 기호(``)를 써서 변수를 표현한다. 일반적으로 숫자키 옆 ~에 있다.
☀️setInterval(함수,간격) : 해당 함수를 지정한 간격만큼 두고 실행한다.
☀️ new Date()를 호출할 경우 현재 날짜와 시간을 가져옵니다.
☀️ padStart,padEnd(자릿수, 빈 공간을 채울 문자) : 자릿수만큼 문자열 공간을 지정하고 빈 공간은 지정한 문자로 채웁니다.

위 개념을 숙지하셨다면 코드를 보여드리겠습니다.
⏬코드예시
const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    const Hour = String(date.getHours()).padStart(2,"0");
    const minute = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");


    clock.innerHTML = `${Hour}`+':'+`${minute}`+':'+`${seconds}`;
}
/* setintervla(내가실행하고자하는 함수/ 시간간격(millisecond단위)) 
    interval 은 매번 무슨 일이 일어나게 하고 싶을 때 사용한다.
*/
getClock();
setInterval(getClock, 1000) /*5초마다 실행*/ 

/* 현재 시간과 날짜를 가져온다.
문서를 보면 다양한 기능이 많다.*/

/*padStart String에 쓸수 있으며, string의 길이를 조절할 수 있다. 또한 
공백을 원하는 문자열로 챙루 수 있다.
pad를 사용할 수 있는 조건은 String이다. 잊지 말자!*/

"1".padStart(2,"0");/* "1"의 스트링 길이가 2가 되도록 하고 만약 해당 문자열이 매개변수의 
길이보다 적다면 "0"으로 채운다. */

"1".padEnd(2,"0") /*start와 달리 반대로 뒤쪽에 매개변수 2번째 인자를 값으로 채운다. */​

⏬HTML 코드

위 내용을 실행하면 시간을 시,분,초단위로 나눠서 h2에 새롭게 출력합니다.
단위는 밀리세컨드단위로 1000 밀리세컨드는 1초를 나타냅니다.(1밀리세컨드 = 1/1000초)


⏬결과
위 사진처럼 시간이 나타나며 1초마다 시간이 갱신되어 나타납니다.

728x90
반응형
SMALL

'JavaScript' 카테고리의 다른 글

JavaScript - toDoList(할일 목록 만들기)  (96) 2023.08.21
JavaScript 인용구 랜덤으로 출력하기  (69) 2023.08.20
JavaScript07 - sort함수를 통한 오름차순,내림차순 정렬  (0) 2023.08.01
JavaScript06 - switch를 사용한 이동효과 만들기  (0) 2023.08.01
JavaScript05 - 조건몬(if) (예시 포함)  (1) 2023.07.31
'JavaScript' 카테고리의 다른 글
  • JavaScript - toDoList(할일 목록 만들기)
  • JavaScript 인용구 랜덤으로 출력하기
  • JavaScript07 - sort함수를 통한 오름차순,내림차순 정렬
  • JavaScript06 - switch를 사용한 이동효과 만들기
공부하고 기억하는 공간
공부하고 기억하는 공간
IT 비전공자로 시작하여 훌륭한 개발자가 되기 위해 공부하고 있는 공간입니다. 틀린 내용이나 부족한 부분이 있으면 댓글로 알려주세요 바로 수정하겠습니다.
    250x250
  • 공부하고 기억하는 공간
    IT - railroad
    공부하고 기억하는 공간
  • 전체
    오늘
    어제
    • 분류 전체보기 (325)
      • 면접 준비 (22)
        • OS (6)
        • Spring Security (0)
        • Java (3)
        • DB (11)
        • Network (3)
      • ElasticSearch (2)
      • Kafka (4)
      • Spring (22)
        • Spring Cloud (7)
        • Security6 (5)
        • JPA (12)
        • 프로젝트 리팩토링 회고록 (4)
        • Logging (8)
        • Batch (2)
      • Redis (17)
        • Redis 개념 (8)
        • Redis 채팅 (5)
        • Redis 읽기쓰기 전략 (1)
      • AWS (11)
      • 리눅스 (29)
        • 리눅스 마스터 2급 (5)
        • 네트워크(기초) (7)
        • 리눅스의 이해 (6)
        • 리눅스의 설치 (2)
        • 리눅스 운영 및 관리 (6)
      • JAVA-기초 (16)
        • JAVA기본 (11)
        • Design Pattern (5)
      • JSP (27)
        • JSP 기본 개념 (10)
        • JSP (1)
      • SQL (1)
      • TIL (36)
      • 문제 풀이 (2)
        • Programmers (9)
        • 백준 문제풀이 (28)
      • JavaScript (10)
      • HTML (17)
      • Ngrinder (1)
        • Ngrinder 문서 정리 (1)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      Spring
      Til
      스프링프레임워크
      자바 알고리즘
      CSS
      redis 채팅
      자바
      프로그래머스
      JavaScript
      springsecurity
      Springframework
      리눅스마스터2급정리
      리눅스
      자바 면접
      redis
      Spring Data Redis
      JSP
      자바기초
      java
      백준
      자바 면접질문
      jsp기초
      JS
      HTML
      리눅스마스터2급
      레디스
      jsp request
      자바스크립트
      spring redis
      자바 반복문
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.3
    공부하고 기억하는 공간
    JavaScript 실시간 시간 출력하기

    개인정보

    • 티스토리 홈
    • 포럼
    • 로그인
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.