JavaScript
[모던 JavaScript] 5.11 과제 정리!
보라해바라기
2022. 12. 13. 22:33
SMALL
- 5.11 Date 객체와 날짜
5.11(1) 날짜 생성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜 생성하기</title>
</head>
<body>
<script>
let date = new Date(2012, 1, 20, 3, 12);
// 월은 0부터 시작 => 2월: 1 넣음
alert(date);
let d2 = new Date("February 20, 2012 03:12:00");
alert(d2)
</script>
</body>
</html>5.11(2) 요일 보여주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요일 보여주기</title>
</head>
<body>
<script>
// getDay 사용
function getWeekDay(date) {
let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
return days[date.getDay()];
}
let date = new Date(2012, 0, 3); // 2012년 1월 3일
alert( getWeekDay(date) );
</script>
</body>
</html>5.11(3) 유럽 기준 달력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>유럽 기준 달력</title>
</head>
<body>
<script>
function getLocalDay(date){
let day = date.getDay();
if(day == 0) {
day = 7
}
return day;
}
let date = new Date(2019, 11, 5); // 2019년 11월 5일
alert( getLocalDay(date) );
</script>
</body>
</html>5.11(4) n일 전 '일' 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>n일 전 '일' 출력하기</title>
</head>
<body>
<script>
/*data 변경 X! 복사본 필요*/
function getDateAgo(date, days) {
let dateCopy = new Date(date);
dateCopy.setDate(date.getDate() - days);
return dateCopy.getDate(); /*이 부분 빼먹음..*/
}
let date = new Date(2015, 0, 2); // 2015년 1월 2일
alert( getDateAgo(date, 1) ); // 1, (2015년 1월 1일)
alert( getDateAgo(date, 2) ); // 31, (2014년 12월 31일)
alert( getDateAgo(date, 365) ); // 2, (2014년 1월 2일)
</script>
</body>
</html>5.11(5) 달의 마지막 일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>달의 마지막 일</title>
</head>
<body>
<script>
function getLastDayOfMonth(year, month) {
let date = new Date (year, month+1 , 0);
return date.getDate();
}
alert( getLastDayOfMonth(2012, 0) ); // 31
alert( getLastDayOfMonth(2012, 1) ); // 29
alert( getLastDayOfMonth(2013, 1) ); // 28
</script>
</body>
</html>5.11(6) 몇 초나 지났을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>달의 마지막 일</title>
</head>
<body>
<script>
function getLastDayOfMonth(year, month) {
let date = new Date (year, month+1 , 0);
return date.getDate();
}
alert( getLastDayOfMonth(2012, 0) ); // 31
alert( getLastDayOfMonth(2012, 1) ); // 29
alert( getLastDayOfMonth(2013, 1) ); // 28
</script>
</body>
</html>5.11(7) 몇 초나 남았을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>몇 초나 남았을까요?</title>
</head>
<body>
<script>
function getSecondsToTomorrow() {
let now = new Date();
let tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1);
let diff = tomorrow - now;
return Math.round (diff/1000); // 밀리세컨드라서 초로 바꾸기 위한 작업
}
alert(getSecondsToTomorrow())
</script>
</body>
</html>5.11 (8) 상대 날짜 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상대 날짜 출력하기</title>
</head>
<body>
<script>
function formatDate (date) {
let diff = new Date() - date;
if (diff < 1000) {
return '현재';
}
let sec = Math.floor (diff / 1000);
if (sec < 60) {
return sec + '초 전';
}
let min = Math.floor (diff / 60000);
if (min < 60) {
return min + '분 전';
}
let d = date;
d = [
'0'+d.getDate(),
'0'+(d.getMonth()+1),
'0'+d.getFullYear(),
'0'+d.getHours(),
'0'+d.getMinutes()
].map(component => component.slice(-2)) // 뒤에서부터 2개
return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');
}
alert( formatDate(new Date(new Date - 1)) ); // "현재"
alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30초 전"
alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5분 전"
// 어제를 나타내는 날짜를 "일.월.연 시:분" 포맷으로 출력
alert( formatDate(new Date(new Date - 86400 * 1000)) );
</script>
</body>
</html>728x90