jQuery를 사용하여 현재 날짜 및 시간 표시
이 자습서에서는 웹 사이트에 날짜와 시간을 표시하는 방법에 대해 설명합니다. JavaScript Date 객체에 대해 자세히 살펴보겠습니다.
우리의 주요 초점은 jQuery를 사용하여 다양한 형식으로 날짜와 시간을 검색하는 것입니다.
jQuery를 사용하여 현재 날짜 및 시간 가져오기
웹 페이지의 날짜 및 시간 표시는 매우 사용자 친화적인 기능입니다. 일부 웹사이트는 신문이 매일 변화하는 정보를 보유하고 있기 때문에 국가의 정치 상태 또는 날짜가 있는 온라인 신문 웹사이트와 같은 다양한 문제에 대해 독자에게 업데이트합니다.
언급된 날짜와 시간으로 특정 블로그나 뉴스를 쉽게 검색하고 읽을 수 있습니다. 오늘은 웹사이트에 날짜 및 시간 기능을 추가하는 방법에 대해 이야기하겠습니다.
자바스크립트의 ‘날짜’ 객체
JavaScript는 애플리케이션 또는 웹 페이지에서 날짜 및 시간과 함께 작동하는 Date 객체를 제공합니다. Date 개체에는 날짜를 설정, 가져오기 및 수정하기 위한 다양한 메서드가 있습니다.
날짜 개체는 다음과 같이 생성됩니다.
var date = new Date();
날짜 변수의 출력을 보면 다음을 볼 수 있습니다.
위 이미지와 같이 현재 날짜, 시간, 요일을 표시합니다. 현재 날짜와 시간의 문자열 표현을 반환하는 Date()와 같은 new 키워드를 사용하지 않고 함수라고 부를 수도 있습니다.
위의 방법은 날짜와 시간을 함께 가져오기 때문에 jQuery를 사용하여 다른 형식으로 날짜와 시간을 개별적으로 가져오는 방법에 대해 이야기하겠습니다. 별도로 얻을 수 있는 다른 옵션을 살펴보겠습니다.
jQuery를 사용하여 현재 날짜 가져오기
이전에 보았듯이 new Date()는 요일, 날짜 및 시간을 반환하지만 요일 또는 날짜를 별도로 표시하려면 어떻게 해야 합니까? 어떻게 할까요?
Date 개체에는 일, 날짜, 월 및 연도를 가져오는 독립적인 메서드가 있습니다. 자세히 살펴 보겠습니다.
getDay(): 현지 시간에 따라 주어진 날짜의 평일이 이 메서드에 의해 반환되며 일요일은 값 0으로 표시됩니다.getDate(): 현지 시간에 따라 지정된 날짜 또는 현재 날짜의 월 일이 이 함수에 의해 반환됩니다.getMonth(): 현지 시간에 따라 주어진 날짜의 월을 숫자 값으로 반환합니다. 여기서 0은 연도의 첫 번째 달을 나타냅니다.getFullYear(): 이 메서드는 현지 시간으로 지정된 날짜의 연도를 반환합니다.
getDay() 및 getMonth() 메서드는 숫자 값을 제공하지만 웹 사이트에 날짜와 월을 이름과 함께 표시하고 싶을 수 있으므로 더 자세히 살펴보고 어떻게 할 수 있는지 살펴보겠습니다.
오늘의 이름을 얻으십시오
요일을 얻기 위해 getDay() 메서드가 있지만 0에서 6까지의 숫자 값을 반환합니다. 여기서 0은 일요일을 나타내고 1은 월요일을 나타냅니다. 우리는 웹 페이지에서 오늘이 0이라고 말하는 것을 원하지 않습니다.
오늘의 이름이 필요합니다. 아래 코드를 보고 이를 수행하는 방법을 확인하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var day_names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var date = new Date();
$("#currentDay").text("Today is: " + day_names[date.getDay()]);
});
</script>
</head>
<body>
<p id="currentDay"></p>
</body>
</html>
출력:
위의 코드는 이해하기 쉽습니다. 요일 이름의 배열을 만들고 일요일을 인덱스 0으로 지정하고 월요일을 인덱스 1로 지정하는 식으로 지정했습니다.
getDay() 함수가 숫자를 반환하면 해당 숫자를 배열의 인덱스로 사용하여 해당 인덱스의 값을 검색합니다.
이달의 이름 얻기
getMonth() 함수는 0에서 11 사이의 숫자 값을 제공합니다. 여기서 0은 1월을 나타내고 1은 2월을 나타냅니다. Date 개체에는 월 이름을 가져오는 함수가 포함되어 있지 않으며 월 이름과 함께 날짜를 표시해야 할 수도 있습니다.
요일 이름을 결정하는 데 사용한 것과 동일한 방법을 사용합니다. 아래 코드를 검토하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#currentMonth").text("Present Month is: " + month_names[date.getMonth()]);
});
</script>
</head>
<body>
<p id="currentMonth"></p>
</body>
</html>
출력:
날짜를 (날짜 월, 연도) 형식으로 표시
이름으로 요일 또는 월을 검색하는 방법은 이미 논의했습니다. 날짜, 월 및 연도 형식으로 날짜를 표시하는 방법을 살펴보겠습니다.
하나의 형식으로 발표하는 방법을 배운 후에는 선택한 다양한 형식으로 실험해 볼 수 있습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#dateFormat").text(date.getDate() + " " + month_names[date.getMonth()] + ", " + date.getFullYear());
});
</script>
</head>
<body>
<p id="dateFormat"></p>
</body>
</html>
출력:
jQuery를 사용하여 현재 시간 가져오기
JavaScript Date 개체는 현재 시간을 가져오는 정적 메서드를 제공합니다. 정적 메서드는 클래스의 개체에 바인딩되지 않으며 클래스 이름으로만 독립적으로 호출할 수 있습니다.
정적 메서드 Date.now()는 현재 시간에 해당하는 숫자 값을 반환합니다.
Date.now()
출력:
시간은 밀리초 단위로 반환됩니다. 이것은 웹 페이지에서 시간을 표시하는 읽기 쉬운 방법이 아닙니다.
시:분:초 형식으로 시간을 표시하려고 합니다. 시간을 원하는 형태로 얻을 수 있는 방법에 대해 논의해 봅시다.
웹 사이트에 시간을 표시할 수 있는 형식은 여러 가지가 있을 수 있습니다. 두 가지 기본 형식, 즉 24시간 및 12시간에 대해 논의한 후 이를 잘 이해하고 원하는 형식으로 시간을 검색할 수 있습니다.
24시간 형식(시:분:초)
Date 개체는 지정된 날짜의 시간을 가져오는 다양한 방법을 제공합니다. 각 방법을 자세히 살펴보겠습니다.
getHours(): 이 메서드는 현지 시간당 시간을 반환합니다.getMinutes(): 이 메서드는 현지 시간당 분을 반환합니다.getSeconds(): 이 메서드는 현지 시간당 초를 반환합니다.
이 세 가지 방법을 사용하여 필요한 형식으로 시간을 쉽게 표시할 수 있습니다. 명확한 이해를 위해 아래 코드를 확인하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
$("#24HFormat").text(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
});
</script>
</head>
<body>
<p id="24HFormat"></p>
</body>
</html>
출력:
기본적으로 이러한 Date 개체 메서드는 24시간 형식으로 시간을 반환합니다. 이것이 우리 웹사이트에서 필요한 형식으로 시간을 쉽게 표시할 수 있는 방법입니다.
12시간 형식(hh: mm: ss)
시, 분, 초를 가져오는 함수는 이전 방법에서 이미 다루었으며 이러한 함수가 24시간 형식을 반환한다는 것을 배웠습니다. 이제 24시간 형식을 12시간 형식으로 변환해야 합니다.
제대로 이해하려면 아래 코드를 살펴보십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
$("#12HFormat").text(time);
});
</script>
</head>
<body>
<p id="12HFormat"></p>
</body>
</html>
출력:
이것이 많은 코딩이라고 생각할 수 있지만 간단합니다. 코드에서 수행하는 작업을 자세히 살펴보겠습니다.
먼저 시간을 12시간 형식으로 변환하기 위해 getHours() 메서드가 반환한 값이 12보다 큰지 확인하고 그렇다면 12를 뺍니다. 둘째, 시간이 12시 이상인지 확인한 다음 PM을 표시하여 AM과 PM 사이를 결정합니다. 그렇지 않으면 AM.
다음 세 줄의 코드에서는 값이 10 미만인지 확인하고 01 또는 02 등으로 표시될 수 있도록 0을 추가합니다.