코딩/1-JavaScript

05_달력1단계 ~ 05_달력2단계

tree0505 2025. 6. 5. 16:16
반응형
  • 05_달력1단계
  • calendar1.html
  • 고대에 여러가지 달력이 나왔는데 그 중에 로마에서 사용하는 달력
    • 딱 맞아 떨어지지 않는다. 
    • 3000년까지만 맞다. 
    • 3000년 이후에는 다시 만들어야함 
  • 1년 => 365 => 365. ? =>4년 마다 윤년 
  • 윤년 => 366일 => 2월 28일 => 29일 
  • 달력을 만들기 위해  
    • 0001년 1월 1일부터 지금까지 일수를 구해야 한다. 
  • 1. 작년까지의 일수  
    • 265 * 2024 
    • 윤년 추가. 
      • 4년 마다 1+ 
      • 100년마다 1- 
      • 400년 마다 1+ 
  • 2. 올해는 따로 구해야한다. 
    • 올해가 윤년이면 [31,29,31,..]
    • 올해가 윤년이 아니면 [31,28,31/.....] 
  • 05_달력1단계
  • calendar1.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #target {
            margin: 0 auto;
            display: table;
        }
        td {
            border: 1px solid black;
            width: 50px;
            height: 50px;
            text-align: center;
        }
    </style>

</head>
<body>

    <div id="target"></div>

    <script>
       
        /*
            [작년까지의 윤년 공식]
            1. 4의 배수이면 +1
            2. 100의 배수이면 -1
            3. 400의 배수이면 +1

            [올해 윤년 공식]
            1. 400의 배수이면 +1
            2. 1번의 제외한 수 중에
               100의 배수가 아니면서 4의 배수이면 +1
           
            [달력 계산]
            0. 1년 1월 1일은 월요일이다.
            1. 작년까지 day를 구한다.
            2. 작년까지의 윤년을 추가한다.
            3. 올해 지난달까지의 day를 구한다.
            4. 올해가 윤년인지 판단해 2월 달력을 변경한다.
            5. 이번달 표시를 위해 1을 추가로 더한다.
        */

       
       let total = 0;
       let thisYear = 2025;
       let lastYear = thisYear - 1;
       
       // 1. 작년까지 day를 구한다.
       total += lastYear * 365;
       
       // 2. 작년까지의 윤년을 추가한다.
       total += parseInt(lastYear / 400);
       total -= parseInt(lastYear / 100);
       total += parseInt(lastYear / 4);
       
       // 3. 올해 지난달까지의 day를 구한다.
       // 4. 올해가 윤년인지 판단해 2월 달력을 변경한다.
       let monthList = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
       
       if(thisYear % 400 == 0) {
            monthList = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        } else if(thisYear % 100 != 0 && thisYear % 4 == 0) {
            monthList = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        }
        let thisMonth = 5;      // 6월
        for(let i=0; i<thisMonth; i++) {
            total += monthList[i];
        }

        //작년 + 6월 + 1
       
        // 5. 이번달 표시를 위해 1을 추가로 더한다.
        total += 1;

        // 테이블 그리기
        let $target = document.querySelector("#target");
        let $table = document.createElement("table");
        for(let i=0; i<7; i++) {
            let $tr = document.createElement("tr");
            for(let j=0; j<7; j++) {
                let $td = document.createElement("td");
                $tr.append($td);
            }
            $table.append($tr);
        }
        $target.append($table);

        // 요일 출력
        let dayList = ["일", "월", "화", "수", "목", "금", "토"];
        for(let i=0; i<dayList.length; i++) {
            $table.children[0].children[i].innerText = dayList[i];
        }

        // 이번 달의 시작 요일 구하기
        let dayIndex = total % 7;

        // 날짜 출력
        let row = 1;
        for(let i=0; i<monthList[thisMonth]; i++) {
            let index = (i + dayIndex) % 7;
            $table.children[row].children[index].innerText = i + 1;
            if(index == 6) {
                row += 1;
            }
        }
    </script>

</body>
</html>
  • 05_달력2단계
  • calendar2.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            #header {
                margin: 0 auto;
                display: table;
            }
            #target {
                margin: 0 auto;
                display: table;
            }
            td {
                border: 1px solid black;
                width: 60px;
                height: 50px;
                text-align: center;
            }
        </style>

    </head>
    <body onload="init()">

        <div id="header">
            <table>
                <tr>
                    <td colspan="6">
                        <span id="today"></span>
                    </td>
                </tr>
                <tr>
                    <td><span id="year"></span>년</td>
                    <td><span id="month"></span>월</td>
                    <td><button onclick="minusClick()">△</button></td>
                    <td><button onclick="plusClick()">▽</button></td>
                </tr>
            </table>
        </div>
        <div id="target"></div>

        <script>
           
            /*
                [작년까지의 윤년 공식]
                1. 4의 배수이면 +1
                2. 100의 배수이면 -1
                3. 400의 배수이면 +1

                [올해 윤년 공식]
                1. 400의 배수이면 +1
                2. 1번의 제외한 수 중에
                   100의 배수가 아니면서 4의 배수이면 +1
               
                [달력 계산]
                0. 1년 1월 1일은 월요일이다.
                1. 작년까지 day를 구한다.
                2. 작년까지의 윤년을 추가한다.
                3. 올해 지난달까지의 day를 구한다.
                4. 올해가 윤년인지 판단해 2월 달력을 변경한다.
                5. 이번달 표시를 위해 1을 추가로 더한다.
            */

            let today = new Date();
           
            let $target = document.querySelector("#target");
            let $table = null
            let dayList = ["일", "월", "화", "수", "목", "금", "토"];

            function init() {

                let thisYear = today.getFullYear();     // 년
                let thisMonth = today.getMonth();       // 월
                let date = today.getDate();             // 일
                let day = today.getDay();               // 요일
                document.querySelector("#year").innerText = thisYear;
                document.querySelector("#month").innerText = thisMonth + 1;

                document.querySelector("#today").innerText = thisYear + "년 "
                + (thisMonth + 1) + "월 "
                + date + "일 "
                + dayList[day] + "요일";

                setDate(thisYear, thisMonth);
            }

            function setDate(thisYear, thisMonth) {

                if($table != null) {
                    $target.removeChild($table);
                }

                // 테이블 그리기
                $table = document.createElement("table");
                for(let i=0; i<7; i++) {
                    let $tr = document.createElement("tr");
                    for(let j=0; j<7; j++) {
                        let $td = document.createElement("td");
                        $tr.append($td);
                    }
                    $table.append($tr);
                }
                $target.append($table);

                let total = 0;

                let lastYear = thisYear - 1;

                // 1. 작년까지 day를 구한다.
                total += lastYear * 365;

                // 2. 작년까지의 윤년을 추가한다.
                total += parseInt(lastYear / 400);
                total -= parseInt(lastYear / 100);
                total += parseInt(lastYear / 4);

                // 3. 올해 지난달까지의 day를 구한다.
                // 4. 올해가 윤년인지 판단해 2월 달력을 변경한다.
                let monthList = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

                if(thisYear % 400 == 0) {
                    monthList = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                } else if(thisYear % 100 != 0 && thisYear % 4 == 0) {
                    monthList = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                }

                for(let i=0; i<thisMonth; i++) {
                    total += monthList[i];
                }

                // 5. 이번달 표시를 위해 1을 추가로 더한다.
                total += 1;

                // 요일 출력
                for(let i=0; i<dayList.length; i++) {
                    $table.children[0].children[i].innerText = dayList[i];
                }

                // 이번 달의 시작 요일 구하기
                let dayIndex = total % 7;
                console.log("시작날짜 = " + dayIndex);

                // 날짜 출력
                let row = 1;
                for(let i=0; i<monthList[thisMonth]; i++) {
                    let index = (i + dayIndex) % 7;
                    $table.children[row].children[index].innerText = i + 1;
                    if(index == 6) {
                        row += 1;
                    }
                }
            }

            function minusClick() {
                let $thisYear = document.querySelector("#year");
                let $thisMonth = document.querySelector("#month");

                let thisYear = Number($thisYear.innerText);
                let thisMonth = Number($thisMonth.innerText) - 1;

                if(thisMonth == 0) {
                    thisYear -= 1;
                    thisMonth = 12;

                    $thisYear.innerText = thisYear;
                    $thisMonth.innerText = thisMonth;
                } else {
                    $thisMonth.innerText = thisMonth;
                }
               
                setDate(thisYear, thisMonth - 1);
            }

            function plusClick() {
                let $thisYear = document.querySelector("#year");
                let $thisMonth = document.querySelector("#month");

                let thisYear = Number($thisYear.innerText);
                let thisMonth = Number($thisMonth.innerText) + 1;

                if(thisMonth == 13) {
                    thisYear += 1;
                    thisMonth = 1;

                    $thisYear.innerText = thisYear;
                    $thisMonth.innerText = thisMonth;
                } else {
                    $thisMonth.innerText = thisMonth;
                }
               
                setDate(thisYear, thisMonth - 1);
            }
       
        </script>

    </body>
    </html>

 

반응형

'코딩 > 1-JavaScript' 카테고리의 다른 글

D10_dom_SPA_암기 => 01_json버전 => _01_모듈화, _02_모둘화와html  (0) 2025.06.09
D10_dom_SPA_암기 => 01_json버전 => _00_basic => _01_json과함수, _02_json과Controller  (0) 2025.06.09
04_숫자슬라이드게임1단계 ~ 04_숫자슬라이드게임3단계  (2) 2025.06.05
03_순발력게임1단계 ~ 03_순발력게임3단계  (0) 2025.06.05
댓글 알고리즘 을 추가  (0) 2025.06.05

'코딩/1-JavaScript'의 다른글

  • 현재글05_달력1단계 ~ 05_달력2단계

관련글

티스토리툴바