![[JavaScript] date(날짜)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzKBOX%2FbtrmJjEGd5q%2F0Odg8yJEjXVFFY0tDEopzk%2Fimg.jpg)
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//onload : 윈도우가 로드된 이후
//window.onload=function(){}
onload=function(){
document.getElementsByTagName("button")[0].onclick = testDate01;
document.getElementsByTagName("button")[1].onclick = testDate02;
document.getElementsByTagName("button")[2].onclick = testDate03;
document.getElementsByTagName("button")[3].onclick = testDate04;
document.getElementsByTagName("button")[4].onclick = testDate05;
}
function testDate01(){
var date = new Date();
var inputDate = document.getElementById("today");
inputDate.innerHTML = date.toDateString() + "<br>";
inputDate.innerHTML += date.toLocaleDateString() + "<br>";
inputDate.innerHTML += date.toLocaleString() + "<br>";
inputDate.innerHTML += date.toLocaleTimeString() + "<br>";
}
function testDate02(){
// id가 today인 태그의 innerHTML에
// 2021/1/21/목요일
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var day = today.getDay();
var dayOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
document.getElementById("today").innerHTML = year + "/" + month + "/" + date +"/" + dayOfWeek[day];
}
function testDate03(){
//2020 11 20
var year = 2020;
var month = 11;
var date = 20;
var start = new Date(year, month-1, date);
document.getElementById("specific").innerHTML = start;
}
function testDate04(){
var dates = document.getElementById("dates");
var inputDate = document.querySelector("#inputDate");
//var inputDate = document.getElementById("inputDate");
var dDay = new Date(dates.value);
dDay.setDate(dDay.getDate() + parseInt(inputDate.value));
document.getElementById("result").value = dDay.toLocaleDateString();
}
function testDate05(){
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var startDate = new Date(start);
var endDate = new Date(end);
var result = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
document.getElementById("res").value = result;
}
</script>
</head>
<body>
<h1>오늘 날짜 출력하기</h1>
<button>오늘날짜</button>
<button>오늘날짜표현</button><br>
<span id = "today"></span>
<h1>특정 날짜 출력하기</h1>
<button>특정날짜</button>
<br>
<span id="specific"></span>
<h1>경과 날짜 출력하기</h1>
<label>지정날짜</label>
<input type="date" id="dates" size="50"><br>
<label>경과일</label>
<input type="number" id="inputDate"><br>
<label>경과 후 날짜</label>
<input type="text" id="result" readonly="readonly">
<button>경과날짜</button>
<h1>D-Day</h1>
<label>시작 날짜</label>
<input type="date" id="start" size="50"><br>
<label>종료 날짜</label>
<input type="date" id="end" size="50"><br>
<label>남은 일수</label>
<input type="text" id="res" readonly="readonly">
<button>남은 일수 구하기</button><br>
<!-- getTime() : milliseconds 반환 -->
</body>
</html>
해당 코드의 기본 실행 결과입니다.
function testDate01(){
var date = new Date();
var inputDate = document.getElementById("today");
inputDate.innerHTML = date.toDateString() + "<br>";
inputDate.innerHTML += date.toLocaleDateString() + "<br>";
inputDate.innerHTML += date.toLocaleString() + "<br>";
inputDate.innerHTML += date.toLocaleTimeString() + "<br>";
}
오늘날짜 버튼을 누르면 버튼 바로 아래 영역에 다양한 표현형식으로 날짜나 시간이 나옵니다!
function testDate02(){
// id가 today인 태그의 innerHTML에
// 2021/1/21/목요일
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var day = today.getDay();
var dayOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
document.getElementById("today").innerHTML = year + "/" + month + "/" + date +"/" + dayOfWeek[day];
}
두번째 버튼인 오늘날짜표현 버튼을 누르면 아래 영역이 위의 사진과 같이 바뀝니다!
function testDate03(){
//2020 11 20
var year = 2020;
var month = 11;
var date = 20;
var start = new Date(year, month-1, date);
document.getElementById("specific").innerHTML = start;
}
3번째 버튼인 특정날짜 버튼을 누른뒤 결과입니다.
<h1>경과 날짜 출력하기</h1>
<label>지정날짜</label>
<input type="date" id="dates" size="50"><br>
<label>경과일</label>
<input type="number" id="inputDate"><br>
<label>경과 후 날짜</label>
<input type="text" id="result" readonly="readonly">
<button>경과날짜</button>
해당 함수는 지정날짜를 정해주고 경과일을 정해주면 지정날짜에서 경과일이 지나면 며칠인지를 나타내줍니다.
function testDate05(){
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var startDate = new Date(start);
var endDate = new Date(end);
var result = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
document.getElementById("res").value = result;
}
마지막 5번째 버튼은 시작날짜와 종료날짜를 정해주면 남은 일수를 구해주는 버튼입니다!
728x90
'JS 관련 > JavaScript' 카테고리의 다른 글
| [JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등) (0) | 2022.01.19 |
|---|---|
| [JavaScript] math (0) | 2022.01.18 |
| [JavaScript] TransObject(형변환) (0) | 2022.01.16 |
| [JavaScript] NumberObject (0) | 2022.01.15 |
| [JavaScript] Object(오브젝트 / 객체) (0) | 2022.01.14 |