자바스크립트 - 시간 관련 함수 (Date)

프로그래밍/JavaScript 자바스크립트 2021. 9. 28.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var now = new Date();

var y = now.getFullYear(); // 년도
var m = now.getMonth() + 1; // 월(getMonth() : 0~11)
var d = now.getDate(); // 일자
var w = now.getDay(); // 요일(0(일)~6(토))

var hr = now.getHours();
var mn = now.getMinutes();
var sc = now.getSeconds();

var ms = now.getTime(); // 1970-01-01 00:00:00 부터 경과 시간(단위 : ms)

var s = y + '-' + m +'-' + d + '   ' + hr +":" + mn + ":" + sc;
console.log(s, w);
console.log(ms);

</script>

</head>
<body>

<h3>내장객체 - Date</h3>

</body>
</html>

new Date() => 내 컴퓨터에서 현재 날짜, 시간에 대한 객체

.getFullYear() = 현재 날짜, 시간에서 년도만 가져오기

.getMonth() = 현재 날짜, 시간에서 월을 가져옴 (근데 0~11로 계산 되기 때문에 우리가 아는 12월까지 맞추려면 +1 해야함)

.getDate() = 현재 날짜, 시간에서 일자를 가져옴

.getDay() = 현재 날짜, 시간에서 오늘이 무슨요일인지 인덱스 숫자를 가져옴

0 = 일요일

1 = 월요일

2 = 화요일

6 = 토요일

.getHours() / .getMinutes() / .getSeconds() = 각각 시간 / 분 / 초 를 가져옴

.getTime() = 1970년 1월 1일 00시 부터 지금 까지 경과한 시간을 밀리초 단위로 가져옴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var y, m, d, s;
var date;

// 2021-12-25 로 Date() 객체 생성
date = new Date(2021, 12-1, 25); // m-1 해줘야함
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m +"-" + d;
console.log(s);

//2021-09-31 로 Date() 객체 생성 - 9월 31일은 10월 1일로 설정
date = new Date(2021, 9-1, 31);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m +"-" + d; // 2021-10-1
console.log(s);

// 일자를 50일로 설정(2021-10-50 로 설정)
date.setDate(50);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
s = y + "-" + m +"-" + d; // 2021-11-19
console.log(s);

</script>

</head>
<body>

</body>
</html>

현재 날짜 시간이 아니라 내가 원하는 날로 맞춰서 객체 만들기

new Date(2021, 12-1, 25); = 괄호안에 내가 원하는 년 월 일을 넣어준다.

(월은 항상 -1을 해준다. Date 객체에서 월은 0~11까지 밖에 없으니까)

그리고 다시 월을 변수로 가져올 때는 +1을 해준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="style.css" type="text/css">

<script type="text/javascript">
function showClock() {
	var now = new Date();
	var y = now.getFullYear();
	var m = now.getMonth()+1;
	var d = now.getDate();
	if(m < 10) m = "0" + m;
	if(d < 10) d = "0" + d;
	
	var hr = now.getHours();
	var mn = now.getMinutes();
	var sc = now.getSeconds();
	if(hr < 10) hr = "0" + hr;
	if(mn < 10) mn = "0" + mn;
	if(sc < 10) sc = "0" + sc;

	var s = y + "-" + m + "-" + d + "  " + hr + ":" + mn + ":" + sc;
	document.getElementById("nowDate").value = s;
	
	setTimeout("showClock()", 1000);
}

window.onload = () => showClock();

</script>

</head>
<body>

<div style="margin: 30px auto; width: 200px; text-align: center;">
	<h3>시스텀 현재 시간</h3>
	<input type="text" id="nowDate" readonly="readonly" style="border: none;">
</div>

</body>
</html>

if(m < 10) m = "0" + m;
if(d < 10) d = "0" + d;

=> 월이 10월 아래면(1~9월) 앞에 0을 붙여서 01월 02월 이런식으로 만듬

일자도 마찬가지로 1~9까지는 앞에 0을 붙여줌

if(hr < 10) hr = "0" + hr;
if(mn < 10) mn = "0" + mn;
if(sc < 10) sc = "0" + sc;

=> 시간 분 초 모두 1~9까지는 앞에 0을 붙임

document.getElementById("nowDate").value = s;

=> 값 s를 문서 내 HTML 중에서 nowDate를 id로 가지고 있는 놈한테 값을 전송

setTimeout("showClock()", 1000);

=> 이 함수를 1초마다 반복

window.onload = () => showClock();

=> 페이지 열자마자 이 함수가 한번 실행되게 설정.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">

function isValidDateFormat(date){ // 날짜 형식 검사 함수
	
	if(date.length != 8 && date.length != 10) return false;
	
	var p = /(\.)|(\-)|(\/)/g;
	date = date.replace(p, "");
	
	var format = /^[12][0-9]{7}$/;
	if(! format.test(date)) return false; // test는 정규식이 올바르면 true 아니면 false
	
	var y = parseInt(date.substr(0,4));
	var m = parseInt(date.substr(4,2));
	var d = parseInt(date.substr(6));
	
	if(m<1 || m>12) return false;
	
	var lastDay = (new Date(y,m,0)).getDate();
	if(d<1 || d>lastDay) return false;
	
	return true;
	
}

function result() {
	
	var s = document.getElementById("inputs").value;
	
	if(! isValidDateFormat(s) ){
		alert("날짜를 정확히 입력 하세요");
		document.getElementById("inputs").focus();
		return;
	}
	
	alert(s + ": 날짜 형식이 올바르게 입력 했습니다.");
	
}

</script>
</head>
<body>

<p>
	날짜 : <input type="text" id="inputs">
	<button type="button" onclick="result();">확인</button>
</p>

</body>
</html>

날짜 형식 검사 (날짜 입력 제대로 했는지 안했는지)

- 총 글자 길이 검사 (20210928 = 8글자 / 2021-09-28 = 10글자)

=> .length 함수를 사용해서 입력 받은 문자열(날짜) 길이 검사

- 콤마, 다시, 슬러시 검사 (, - /)

보통 날짜를 입력하는 형식으로 입력 했을 경우를 대비해서

,콤마 -다시 /슬러시를 전부 "" 없는 것으로 바꿈

/^[12][0-9]{7}$/; = 날짜 형식 검사 정규식

if(! format.test(date)) return false;

=> test(date)는 정규식이 올바른지 아닌지를 판별해줌

var y = parseInt(date.substr(0,4));
var m = parseInt(date.substr(4,2));
var d = parseInt(date.substr(6));

=> 입력 받은 문자열들을 잘라서 각각 년 월 일 변수에 넣어줌

var lastDay = (new Date(y,m,0)).getDate();
if(d<1 || d>lastDay) return false;

=> 해당 월의 마지막 일자를 구하는 방법

입력 받은 년과 월을 인자로 넣어주고 일자를 0으로 하면 그 해당 년의 월에 해당하는 마지막 일자를 알 수 있다.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 달력 (0)	2021.09.28
자바스크립트 - Math 함수 (0)	2021.09.28
자바스크립트 - 문자열 활용 (0)	2021.09.27
자바스크립트 - 함수 만들기 (0)	2021.09.27
자바스크립트 - 반복문, if문, prompt, confirm (0)	2021.09.27

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바