box/javascript+

Javascript 내장 객체 - Date

Date 객체 

  • 시스템의 현재 날짜, 시간을 조회하거나 설정하기 위한 기능을 제공한다.
  • 자바스크립트에서 날짜와 시간을 다루는데 사용되는 객체이다.
  • 이 객체를 생성하기 위해서는 new연산자를 이용하여 만들 수 있다.

 

 

 

let 객체명 = new Date();
let 객체명 = new Date(년, 월-1, 일);

→ Date 객체는 년/월/일/시/분/초에 대한 정보를 내장하고 있다.

 

 

 

⭐ Date 객체의 메소드

객체안에 저장된 정보들을 메서드를 사용하여 리턴받거나 다른값으로 변경할 수 있다.

메서드 설 명
getFullYear() setFullYear(year) 연도
getMonth() setMonth(month) 월(0 ~ 11) 예) 0 : 1월, 1 : 2월, ... , 11 : 12월
getDate() setDate(date) 일. 결과값은 1 ~ 31 중 한 개의 숫자값
getDay() setDay() 요일(0 ~ 6) 예) 0 : 일요일, 1 : 월요일, ... , 6 : 토요일
getHours() setHours(hours) 시(0 ~ 23). 결과값은 0 ~ 23 중 한 개의 숫자값
getMinutes() setMinutes(minutes) 분(0 ~ 59). 결과값은 0 ~ 59 중 한 개의 숫자값
getSeconds() setSeconds(seconds) 초(0 ~ 59). 결과값은 0 ~ 59 중 한 개의 숫자값
getTime()   1970년 1월 1일 이후 현재까지의 시간을 천분의 1초 단위로 리턴한다
getMilliseconds() setMilliseconds(Milliseconds) 밀리초를 설정한다

 

 

 

⭐ Date 객체 예시 1

<head>
<script type="text/javascript">
    
	// Date객체 생성
	let mydate=new Date();
	
	// 년,월,일,시간,분,초를 리턴받기
	let yy=mydate.getFullYear();
	let mm=mydate.getMonth()+1;
	// mydate.setDate(1);
	let dd=mydate.getDate();
	
	// 요일의 이름을 저장하고 있는 배열의 생성
	let days=["일","월","화","수","목","금","토"];
    
	// 0~6(=일~토)의 값이 리턴됨
	let i=mydate.getDay();
	let day=days[i];
	
	let hh=mydate.getHours();
	let mi=mydate.getMinutes();
	let ss=mydate.getSeconds();
	
	let result="오늘은"+yy+"년"+mm+"월"+dd+"일"+day+"요일 입니다<br/>";
	result+="현재시간은"+hh+"시"+mi+"분"+ss+"초 입니다."
	document.write("<h1>현재 날짜와 시간 출력</h1>");
	document.write("<h3>"+result+"</h3>");
	
	document.write("<h1>toXXXString() 메서드 예제</h1>");
	// toLocaleDateString() 함수는 "년/월/일"를 문자열로 반환하는 함수
	document.write("<h3>"+mydate.toLocaleDateString()+"</h3>");
	// toLocaleTimeString() 함수는 "오전/오후 시:분:초"를 문자열로 반환하는 함수
	document.write("<h3>"+mydate.toLocaleTimeString()+"</h3>");
	// toLocaleString() 함수는 "년/월/일 오전/오후 시:분:초"를 문자열로 반환하는 함수
	document.write("<h3>"+mydate.toLocaleString()+"</h3>");
	
	function startTime() {
		let now=new Date();
		let result=now.toLocaleString();
		document.getElementById("timeArea").innerHTML=result;
		window.setTimeout("startTime()",1000);	//setTimeout("호출함수", 1/1000)
		//1초 간격으로 값을 출력합니다.
	}
		
</script>
				
		
</head>
<body onload="startTime()">
		<h1>1초 간격으로 시간 출력</h1>
		<h3 id="timeArea"></h3>
</body>

 

⭐ Date 객체 예시 2

// 1초 간격으로 시계 동작 / 중지
let time_id;				
function start_time() {
	let now = new Date();
	document.getElementById("time").innerHTML=now.toLocaleTimeString();
	time_id=setTimeout("start_time()",1000);
}
 
function stop_time() {
	clearTimeout(time_id);
}
<button type="button" onclick="start_time()">시계동작</button>
<button type="button" onclick="stop_time()">시계중지</button>
<p id="time"></p>

 

⭐ Date 객체 예시 3

// 3초후에 알람창이 뜸
function showAlert() {
	setTimeout(function () {alert("setTimeout()을 사용하여 표시됩니다")},3000);
}
<p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다.</p>
<button type="button" onclick="showAlert()">눌러보기</button>

 

⭐ Date 객체 예시 4

// 1초 간격으로 텍스트 색상이 자동으로 변경됨 / 중지
function startTextColor() {
	let element=document.getElementById("target")
	element.style.color=(element.style.color=="red") ? "blue":"red";
	element.style.backgroundColor=(element.style.backgroundColor=="green") ? "yellow":"green";
}		
 
let id;		
function changeColor() {
	id=setInterval(startTextColor,1000)
}
 
function stopTextColor() {
	clearInterval(id);
}
<div id="target">
	<p>This is a Text.</p>
</div>
<button type="button" onclick="changeColor()">시작</button>
<button type="button" onclick="stopTextColor()">중지</button>

'box > javascript+' 카테고리의 다른 글

Javascript 내장 객체 - location  (0) 2022.06.30
Javascript 내장 객체 - window  (0) 2022.06.30
Javascript 내장 객체 - Math  (0) 2022.06.30
Javascript 내장 객체 - Array  (0) 2022.06.30
Javascript 내장 객체 - String  (0) 2022.06.30

티스토리툴바