[모던 JavaScript] 5.11 과제 정리!

    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
    저작자표시

    'JavaScript' 카테고리의 다른 글

    [모던 JavaScript] 5.9~ 5.10 과제 정리!  (0) 2022.12.09
    [모던 JavaScript] 5.6~ 5.8 과제 정리!  (2) 2022.12.08
    [모던 JavaScript] 5.4~ 5.5 과제 정리!  (0) 2022.12.04
    [모던 JavaScript] 4.6 ~ 5.3 과제 정리!  (0) 2022.12.01
    [모던 JavaScript] 4.5 과제 정리  (0) 2022.11.25

    관련글

    댓글

    라이브러리 브랜드 그룹 | 심리학도의 좌충우돌 개발 여행기

    티스토리툴바