JavaScript에서 현재 시간 가져 오기
-
JavaScript에서
Date개체를 사용하여 현재 시간 가져 오기 - JavaScript에서 UTC 형식으로 현재 시간 가져 오기
- JavaScript에서 로컬 형식으로 전체 현재 시간 가져 오기
예를 들어, 사용자에게 현재 시간을 표시하려는 디지털 시계와 같은 웹 응용 프로그램을 만드는 경우와 같이 웹 사이트에 현재 날짜 또는 시간을 표시하고 싶을 때가 있습니다. JavaScript 언어에서 제공하는 Date 개체의 도움으로 쉽게 수행 할 수 있습니다.
JavaScript에서Date개체를 사용하여 현재 시간 가져 오기
JavaScript의Date개체를 사용하면 날짜와 시간을 사용할 수 있습니다. 이 개체를 사용하여 시간을 수동으로 설정 한 다음 가져 오거나 현재 시간에 대한 데이터를 가져올 수 있습니다. 다음은 JavaScript에서 시간을 가져 오는 데 사용할 수있는 몇 가지 방법입니다.
| 행동 양식 | 목적 |
|---|---|
getHours() |
표준시 (0-23)에 따라 시간을 반환합니다. |
getMinutes() |
표준시 (0-59)에 따라 분을 반환합니다. |
getSeconds() |
표준시 (0-59)에 따라 초를 반환합니다. |
아래 코드 예제를 통해 이것을 이해해 봅시다. 아래 프로그램은 브라우저에 현재 시간을 표시합니다. 우리 모두는 시간이 시간, 분, 초의 세 가지로 구성된다는 것을 알고 있습니다. 이러한 각 데이터를 얻기 위해 JavaScript에서 사용할 수있는 다른 방법이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="displayHours"></p>
<p id="displayMinutes"></p>
<p id="displaySeconds"></p>
<script>
var displayHours = document.getElementById('displayHours');
var displayMinutes = document.getElementById('displayMinutes');
var displaySeconds = document.getElementById('displaySeconds');
var currentTime = new Date();
displayHours.innerHTML = currentTime.getHours() + " hrs";
displayMinutes.innerHTML = currentTime.getMinutes() + " min";
displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
</script>
</body>
</html>
출력:
22 hrs
56 min
19 sec
웹 페이지에이 3 가지 항목을 표시하기 위해 3 개의 단락 태그를 사용합니다. 이러한 각 태그에는 연관된id가 있습니다. 이id를 사용하여document.getElementById()메소드를 사용하여 JavaScript 프로그램 내에서 이러한 HTML 요소에 액세스 할 수 있습니다. 그런 다음displayHours,displayMinutes및displaySeconds라는 이름의 변수에 이러한 각 HTML 태그를 저장합니다.
현재 시간을 얻으려면Date객체를 생성자로 호출해야합니다 (여기에new키워드가 있음에 유의). 이Date개체는currentTime변수에 저장할 숫자를 반환합니다. 이제currentTime변수에 전체 시간 (시간, 분 및 초)이 포함됩니다.
현재 시간과 3 개의 단락 태그가 있으며이를 통해 브라우저에 시간이 표시됩니다. 개별 필드, 즉시, 분 및 초를 가져 오기 위해currentTime변수에 대해 각각getHours(),getMinutes()및getSeconds()메소드를 사용합니다. innerHTML속성을 사용하여 이러한 개별 필드를 각 단락 태그에 할당 할 수 있습니다. 위 코드를 브라우저에서 HTML 문서로 실행하면 브라우저 창에 현재 시간이 출력됩니다.
이 프로그램은 컴퓨터를 기반으로 현재 현지 시간을 표시하므로 위의 코드를 실행하는 시간에 따라 위의 출력이 달라질 수 있습니다.
시간 형식 (GMT, UTC, IST 등)과 날짜로 전체 시간을 원하는 경우 아래와 같이innerHTML속성을 사용하여 단락 태그에currentTime변수를 직접 할당 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime;
</script>
</body>
</html>
출력:
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
JavaScript에서 UTC 형식으로 현재 시간 가져 오기
UTC (Universal Time Coordinate) 형식으로 시간을 얻을 수있는 다양한 방법이 있습니다. 이러한 방법은 위의 방법과 거의 동일한 방식으로 작동합니다.
다음은 UTC 형식으로 시간을 제공하는 방법 목록입니다.
| 행동 양식 | 목적 |
|---|---|
getUTCHours() |
표준시 형식 (0-23)으로 시간 값을 반환합니다. |
getUTCMinutes() |
표준시 형식 (0-59)으로 분 값을 반환합니다. |
getUTCSeconds() |
표준시 형식 (0-59)으로 초 값을 반환합니다. |
JavaScript에서 로컬 형식으로 전체 현재 시간 가져 오기
우리가 본 메소드는 전체 시간 자체가 아닌 시간, 분 또는 초의 특정 부분 만 반환합니다. 따라서 전체 현재 시간을 로컬 형식으로 가져 오기 위해 toLocaleTimeString() 이라는 이름의 메서드를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="dateAndTime"></p>
<script>
var dateAndTime = document.getElementById('dateAndTime');
var currentTime = new Date();
dateAndTime.innerHTML = currentTime.toLocaleTimeString();
</script>
</body>
</html>
출력:
11:43:06 PM
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn