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>'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] Math 객체 (0) | 2024.05.10 |
|---|---|
| [JavaScript] String 객체 (0) | 2024.05.09 |
| [JavaScript] Array객체 (0) | 2024.05.08 |
| [JavaScript] 리터럴 객체 / 동적함수 / 객체생성자함수 (0) | 2024.05.07 |
| [JavaScript] 배열 / 함수 / confirm() (0) | 2024.05.07 |
