JavaScript

[JavaScript] #8 실시간 시계 만들기 (자바스크립트 시간, 시계 구현 및 출력)

권락현 2022. 1. 3. 21:38

이번에는 자바스크립트 코드로 간단하게 웹페이지에 시간을 출력하는 방법을 알아보겠습니다

1. 사용할 객체와 메서드

Date() : 시간을 표현할 때 쓰는 객체
Date().getHours() : 시를 출력
Date().getMinutes() : 분을 출력
Date().getSeconds() : 초를 출력
"String". padStart(문자열 길이, 추가할 문자열) : 문자열의 기본 길이를 설정하고 기본 길이보다 짧으면 맨 앞에 지정한 문자를 추가해줌 예) "1".padStart(3,"0") => "001"을 리턴
getInterval(함수, ms단위초) : 함수를 입력한 시간 주기에 한 번씩 실행

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

- Date 객체를 받고 시, 분, 초를 입력

- "String". padStart()를 사용하여 한자리수 앞에 0을 붙이도록 설정

- h1태그 안에 받은 수를 innerText로 출력

- setInterval()을 사용하여 1초마다 값 갱신

- 처음 페이지를 띄울 때 1초 뒤에 나오므로 setInterval() 쓰기 전에 한번 미리 실행

이상 간단하게 html 페이지에 시간을 띄우는 방법을 정리해보았습니다.

[JavaScript] #7 이벤트리스너(EventListener) 사용법 및 예시(자바스크립트 동적 웹 구현, html 클래스 변경, 이벤트 처리) (0)	2022.01.02
[JavaScript] #6 innerText, innerHTML 사용법(자바스크립트 태그, 텍스트 생성, 삽입, 수정) (0)	2022.01.01
[JavaScript] #5 JSON 정리, 사용법 (자바스크립트 stringify, parse, 객체를 json으로, json을 객체로 변환) (0)	2022.01.01
[JavaScript] #4 객체(object) 사용법, property (자바스크립트, 함수로 객체생성, 객체 반복문, 객체 복제/복사) (0)	2021.12.31
[JavaScript] #3 함수(function) 선언, 표현, 사용법, 특징 (자바스크립트 화살표 함수, 디폴트 값, 함수 호이스팅) (0)	2021.12.31