[JavaScript] Date 객체, setInterval (+window.onload)

아잠만_ 2024. 5. 8. 17:39

Date()객체를 생성하여 현재 날짜 생성

특정한 날짜를 생성하기 위해선 가로안에 값을 직접 쓰기

new Date(); // 현재 날짜와 시간
new Date(ms); // 1970/01/01 이후의 밀리 초
new Date(dateString); ex. "2010. 3. 15"
new Date(year,month,day[,hour[,minutes[,seconds]]]); // 0월 부터 시작

.toLocaleString() ==> 한글로 표현

.toLocaleDateString() ==> 날짜만 표현

.toLocaleTimeString() ==> 시간만 표현

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

const day1= new Date();
const day2 = new Date(1000);
const day3 = new Date("2010. 3. 15");
const day4 = new Date(2010,3-1,15); // 0월 부터 시작
const proc1 = () =>{
	
	let out = `${day1}<br> ${day2}<br> ${day3}<br> ${day4}<br>`;
	out += `${day1.toLocaleString()}<br> ${day2.toLocaleString()}<br> 
	${day3.toLocaleDateString()}<br> ${day4.toLocaleTimeString()}`;
	
	printOut('result1',out);
}

const printOut = (result, out) => {
	document.getElementById(result).innerHTML = out;
}
</script>
</head>
<body>

	<div class="box">
		<h3></h3>
		<input type="button" value="확인" onclick="proc1()"> <br> <br>

		<div id="result1"></div>
	</div>
</body>
</html>

요일 자바스크립트 함수

const proc2 = () => {
	let today = new Date();
// 	alert(today.getDay());
	let day ="";
	switch (today.getDay()) {
	case 0:
		day="일요일";
		break;
	case 1:
		day="월요일"
		break;
	case 2:
		day="화요일"
		break;
	case 3:
		day="수요일"
		break;
	case 4:
		day="목요일"
		break;
	case 5:
		day="금요일"
		break;
	case 6:
		day="토요일"
		break;
	default:
		break;
	}
	
	dayDisp(today, day);
}

// 출력 메서드
function dayDisp(today, day) {
	let disp = `오늘은 ${today.toLocaleString()} <br>`;
	disp+= `${day} 입니다`;
	document.getElementById('result2').innerHTML = disp;
}

배열요소로 접근

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

//오늘의 날짜를 생성
const today = new Date();	

const proc1 = () => {
	// 	요일 배열 생성
	const arr = ["일요일", "월요일","화요일","수요일","목요일","금요일","토요일"];
	
	let day = today.getDay();
// 	alert(arr[day]);

	let out = `오늘은 ${today.toLocaleDateString()} <br> ${arr[day]}입니다`;
	document.getElementById('result1').innerHTML = out;
}
</script>
</head>
<body>
	
	<div class="box">
		<h3>요일 구하기 - getDay()<br>0~6값을 발생 - 
		1. if또는 switch를 이용해서 일~토요일로 변환 0502 조건 switch문제 참조 <br>
		2. 배열을 이용 - 일~토의 값으로 배열을 생성, index를 가지고 배열요소에 접근</h3>
		<input type="button" value="확인" onclick="proc1()"> <br> <br>

		<div id="result1"></div>
	</div>
</body>
</html>

setInterval (window.onload)

setInterval(function() { }, ms);
setInterval(() => { }, ms);

ms가 지나면 함수 function이 실행된다

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

//오늘의 날짜를 생성
const today = new Date();	

// 	요일 배열 생성
const arr = ["일요일", "월요일","화요일","수요일","목요일","금요일","토요일"];

function proc0() {
// setInterval(function() { }, 1000);
// setInterval(() => { }, 1000);
setInterval(() => { 
	// 1초마다 한번씩 시간 갱신
	// Date객체를 생성
	let curr = new Date();
	
	let day = curr.getDay();
	let out = `오늘은 ${curr.toLocaleString()} ${arr[day]}입니다`;
	document.getElementById('result0').innerHTML = out;
	
}, 1000);
	
}
// body의 내용으로 객체를 생성하고 브라우저에 로딩된 후에 실행된다
window.onload = proc0();
// window.onload = function() { }
</script>
</head>
<body>

	<div class="box">
		<h3>1초간격으로 시계가 움직임 <br> setInterval(function(){}, ms)함수 사용<br>
		버튼 클릭없이 window가 로드 되자마자 바로 실행되도록 함</h3>

		<div id="result0"></div>
	</div>
</body>
</html>

getTime()

getTime()은 ms값을 리턴

값의 차이로 날짜가 얼마나 경과되었는지 / 100일 후 같은 특정 시간이 지난 후의 날짜를 파악할 수 있다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const today = new Date();

const proc1 = () => {
	
	// 현재 날짜 ms
	let toTime = today.getTime(); //1972년 기준
	console.log(toTime);

	let bday = new Date("2000.1.1");
	let bTime =  bday.getTime();
	
	// ms의 간격을 구함 현재 - 생일
	let times = toTime-bTime;
	
	// times값으로 몇시간, 몇 년 경과?
	let year = times/1000/3600/24/365;
	year = year.toFixed(0);
	let out = `오늘 : ${today.toLocaleDateString()}<br> 생일 : ${bday.toLocaleDateString()}<br>
				 경과 년도 : ${year}년`;
	document.querySelector('#result1').innerHTML=out;
}

function proc2() {
	// 현재 날짜 ms
	let toTime = today.getTime(); //1972년 기준
	
	// 100일 후의 ms
	let day100 = 100 * 24 * 60 * 60 * 1000;
	
	// 두 개의 값을 더해서 총 ms를 구한다 - 새로운 날짜 객체를 생성
	let laterTime = new Date(toTime+day100);
	
	let out = `오늘 : ${today.toLocaleDateString()}<br> 생일 : ${laterTime.toLocaleDateString()}`;
	document.querySelector('#result2').innerHTML=out;
}
</script>
</head>
<body>

	<div class="box">
		<h3>경과시간구하기 - getTime()<br>
		getTime()은  ms값을 리턴<br>
		태어난 날로부터 현재까지 몇일 경과했는지</h3>
		<input type="button" value="확인" onclick="proc1()"> <br> <br>

		<div id="result1"></div>
	</div>
	<div class="box">
		<h3>경과시간구하기 - getTime()<br>
		getTime()은  ms값을 리턴<br>
		오늘부터 1일 일때 100일 째 되는 날이 언제일까</h3>
		<input type="button" value="확인" onclick="proc2()"> <br> <br>

		<div id="result2"></div>
	</div>
</body>
</html>

날짜 이전, 다음을 이용해 날짜 변경하는 예시

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#cur{
	display: inline-block;
	width: 200px;
	text-align: center;
	background: white;
	font-size: 1.3rem;
}
</style>
<script>
const today = new Date();

window.onload= function() {
	document.querySelector('#cur').innerHTML=`${today.toLocaleDateString()}`;
}

// target : parameter변수, 매개변수, 지역변수
// 호출시 this 객체 변수를 받은 변수
function proc3(target) {
	// 현재 날짜(id=cur)부분의 값을 가져와 getTime()을 얻음
	curvalue = document.querySelector('#cur').innerText; // 2024.05.09.
	let curday = new Date(curvalue);
	// 현재 날짜 ms
	let toTime = curday.getTime(); //1972년 기준
	// 1일 후의 ms
	let day = 1 * 24 * 60 * 60 * 1000;
	
	// 두 개의 값을 더해서 총 ms를 구한다 - 새로운 날짜 객체를 생성
	if(target.value=='다음'){
		curday = new Date(toTime+day);
	} else{
		curday = new Date(toTime-day);
	}
	
	document.querySelector('#cur').innerHTML=`${curday.toLocaleDateString()}`;
}
</script>
</head>
<body>
	<div class="box">
		<h3>경과시간구하기 - getTime()<br>
		getTime()은  ms값을 리턴<br>
		오늘을 기준으로 이전 다음날 구하기<br>
		id-cur에 오늘 날짜가 출력된다</h3>
		<input type="button" class="day" value="이전" onclick="proc3(this)">
		<div id = "cur"></div>
		<input type="button" class="day" value="다음" onclick="proc3(this)"> <br> <br>

	</div>
</body>
</html>

getTime()를 이용하여 교환 기간을 계산하는 예제

7일이상 경과했으면 교환 환불 불가능

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css"> 
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#cur{
	display: inline-block;
	width: 200px;
	text-align: center;
	background: white;
	font-size: 1.3rem;
}
</style>
<script>
const today = new Date();

function proc4() {
	// 선택한 날짜를 가져온다
	bvalue = document.querySelector('#bday').value;
	let bday = new Date(bvalue);
	
	let bTime = bday.getTime();
	// 1일 후의 ms
	
	toTime = today.getTime();
	
	let sub = toTime-bTime;
	sub = sub/1000/60/60/24;
	
	console.log(sub);
	sub = sub.toFixed(0);
	
	let out = `구입한 날짜 : ${bday.toLocaleDateString()}<br> 
				현재 날짜 : ${today.toLocaleDateString()}<br><br>
				구입한 지 ${sub}일이 지났습니다<br>`;
				
	// 두 개의 값을 더해서 총 ms를 구한다 - 새로운 날짜 객체를 생성
	if(sub>=7){
		out += `교환불가`;
	} else{
		out += `교환가능`;
	}	
	document.querySelector('#result4').innerHTML=out;
}
</script>
</head>
<body>
	</div>
		<div class="box">
		<h3>경과시간구하기 - getTime()<br>
		getTime()은  ms값을 리턴<br>
		구입한 날로부터 현재까지 몇일 경과했는지 구한다<br>
		7일이상 경과했으면 교환 환불 불가능</h3>
		구입 날짜 : <input type="date" id="bday">
		<input type="button" value="확인" onclick="proc4()"> <br> <br>

		<div id="result4"></div>
	</div>
</body>
</html>