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) (예시 포함)  (0) 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)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

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

    • 최근 글

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

    티스토리툴바