[JavaScript] 자바스크립트로 달력, 시계(디지털) 구현하기 (팝업 구현)

 

 

 

1. 디지털 시계 구현

2. 달력 구현

3. 날짜 구현

4. 날짜 클릭시 달력 팝업창으로 표기

 

 

---

style

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #popupButton {
            padding: 10px 20px;
            font-size: 16px;
        }

        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }

        #closeButton {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
        }


        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 8px;
            min-height: 50px;
        }
        th {
            background-color: #f2f2f2;
        }
        .bold {
            font-weight: bold;
        }
        .red-text {
            color: red;
        }
    </style>

 

popup 을 위한 style

.popup class 초기 display 를 none으로해둠. 이후 팝업창 띄울때 display 를 flex로 바꾸어 표기시킨다.

 

 

body

    <h1 id="date"></h1> 날짜를 클릭하세요.
    <h1>시계</h1>
    <h1 id="clock"></h1>

    <!-- style 이용하여 처음엔 display none, 클릭시 flex 로 표기(반응형으로 가운데 위치) 팝업에 집중시키기위해 background color 사용 -->
    <div id="popup" class="popup">
        <div class="popup-content">
            <h1>달력</h1>
            <table id="calander">
                <tbody>
                    <tr>
                        <th id="prevMonth">◀</th>
                        <th colspan="5"></th>
                        <th id="nextMonth">▶</th>
                    </tr>
                    <tr class="bold">
                        <th class="red-text">일</th>
                        <th>월</th>
                        <th>화</th>
                        <th>수</th>
                        <th>목</th>
                        <th>금</th>
                        <th class="red-text">토</th>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                    <tr>
                        <td class="red-text"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="red-text"></td>
                    </tr>
                </tbody>
            </table>
            <button id="closeButton">Close</button>
        </div>
    </div>
    
    <!-- popup 효과 띄우려고 div 추가했음. 제외하여도됨.. -->

 

 

script

 

1. 공통함수 및 함수에 사용할 초기 값 선언

	// 숫자가 5일 경우 시계나 달력에 05 로 표기하기위해 앞에 0을 붙이는 함수
		var modifyNumber = time =>{
            if(parseInt(time)<10){
                return "0"+time;
            }else{
                return time;
            }
        }

        var dateInfo = new Date();
        var year = dateInfo.getFullYear();
        // January => 0 이라서 +1 필요
        var month = dateInfo.getMonth() + 1;

 

 

2. 시계 구현

        var setClock = () =>{
            let dateInfo = new Date();
            let year = dateInfo.getFullYear();
            // January => 0 이라서 +1 필요
            let month = dateInfo.getMonth() + 1;
            let hour = dateInfo.getHours();
            if(hour<13){
                hour = "오전 "+ modifyNumber(hour);
            }else{
                hour = "오후 "+ modifyNumber(hour-12);
            }
            let min = modifyNumber(dateInfo.getMinutes());
            let sec = modifyNumber(dateInfo.getSeconds());
            document.getElementById("clock").innerHTML = hour + ":" + min + ":" + sec;

            let date = modifyNumber(dateInfo.getDate());
            document.getElementById("date").innerHTML = year + "-" + modifyNumber(month) + "-" + date;

        }
        
        
        window.onload = function(){
            setClock();
            setInterval(setClock,1000);
        }

 

 

3. 날짜 클릭시 팝업표현을 위한 클릭 이벤트

        document.getElementById("date").addEventListener('click', event =>{
            document.getElementById('popup').style.display = 'flex';
            // alert("test");
        });

        document.getElementById("closeButton").addEventListener('click', event =>{
            document.getElementById('popup').style.display = 'none';
            // alert("test");
        });

 

 

4. 달력 구현하기

        const table = document.getElementById('calander');

		//달력 그리기 함수
        var loadCalander = (year, month) => {
           
            //해당 달 정보
            const monthInfo = table.rows[0];
            monthInfo.cells[1].textContent = year + "년 " + modifyNumber(month) + "월";
            const thirdRow = table.rows[2];
            const cell = thirdRow.cells[2];

            //시작일
            let monthStartDay = new Date(year, month -1, 1).getDay();
            //한달에 며칠이 있는지
            let daysInMonth = new Date(year, month, 0).getDate();

            console.log(daysInMonth);
            console.log(monthStartDay);
            console.log(new Date(year, month, 1));

            let day = 1;
            for(let i = 2 ; i < 8 ; i++){
                for(let j = 0 ; j < 7 ; j++){
                    if(i === 2 && j < monthStartDay){
                        table.rows[i].cells[j].textContent = " ";
                    }else{
                        table.rows[i].cells[j].textContent = day;
                        day++;
                    }
                    if(daysInMonth+1 < day){
                        table.rows[i].cells[j].textContent = " ";
                    }
                }
            }

        }

        //DOM 로드 후 달력 그리기 (display=none 으로 바로 표시되지 않음)
        document.addEventListener('DOMContentLoaded', function() {
            loadCalander(year, month);
        });

 

5. 달력 이전달, 전달 그리기

        document.getElementById("prevMonth").addEventListener('click', event =>{
            let parts = table.rows[0].cells[1].textContent.split('년 ');
            let curYear = parts[0];
            let curMonth = parseInt(parts[1].slice(0, -1)) - 1;

            if(curMonth <= 0){
                curYear--;
                curMonth = 12;
            }
            if(curYear == 0){
                curYear = 0;
                curMonth = 0;
            }

            loadCalander(curYear, curMonth)
        });
        
        document.getElementById("nextMonth").addEventListener('click', event =>{
            let parts = table.rows[0].cells[1].textContent.split('년 ');
            // let parts = text.split('년 ');
            let curYear = parts[0];
            let curMonth = parseInt(parts[1].slice(0, -1)) + 1;

            if(curMonth >= 13){
                curYear++;
                curMonth = 1;
            }

            loadCalander(curYear, curMonth)
        });

 

curMonth 를 이용하여 값 표시.

 

menu3.html

0.01MB