JavaScript로 월간 달력을 만드는 방법-프런트엔드 Q&A-php.cn

JavaScript로 월간 달력을 만드는 방법

王林

풀어 주다： 2023-05-16 12:45:08

원래의

759명이 탐색했습니다.

JavaScript로 월간 달력을 만드는 방법을 소개합니다

JavaScript는 웹 개발에 사용되는 프로그래밍 언어로 일반적으로 클라이언트 측 웹 개발에 사용되는 동적 스크립트 언어입니다. 이 기사에서는 JavaScript를 사용하여 웹 페이지에 간단한 월별 달력을 만드는 방법을 소개합니다.

요구 사항:

월별 달력을 만들기 전에 다음 파일이 필요합니다.

1. 웹 인터페이스 구축을 위한 HTML 파일

2. HTML 파일에 스타일을 적용하기 위한 CSS 파일

3. 월간 달력 추가를 위해

다음으로 월간 달력을 처음부터 만들어 보겠습니다.

HTML 파일 만들기

먼저 HTML 파일을 만들고, 처음부터 작성하거나 템플릿을 사용하여 .html 파일로 저장할 수 있습니다. 파일에 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>月历</title>
</head>
<body>
    <h1 id="currentMonth">月历</h1>
    <table>
        <thead>
            <tr>
                <th>星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody id="calendarBody">
        </tbody>
    </table>

    <script type="text/javascript" src="calendar.js"></script>
</body>
</html>

로그인 후 복사

이 HTML 파일에서는 "Month Calendar"라는 제목의 h1 태그를 정의하고 태그 내부에 ID가 "currentMonth"인 속성을 추가합니다. 이 속성은 이번 달 표시에 사용됩니다. JavaScript 코드에서. 또한 달력을 표시하기 위해 테이블 태그를 사용합니다. 이 테이블에는 7일 주간에 해당하는 7개의 열이 있습니다. tbody 태그는 JavaScript 코드로 월별 달력 테이블을 생성하는 데 사용되며 페이지의 월별 달력을 생성하는 데 사용되는 JavaScript 파일이 포함된 스크립트 태그도 추가했습니다.

페이지를 아름답게 만들기 위해 이 HTML 파일에 몇 가지 CSS 스타일을 추가할 수도 있습니다.

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    text-align: center;
}

th {
    height: 25px;
    background-color: #cccccc;
}

td {
    height: 50px;
}

로그인 후 복사

이 스타일은 페이지의 테이블, th 및 td 요소에 몇 가지 기본 스타일을 추가합니다.

JavaScript 파일 만들기

이제 페이지에 월별 달력 기능을 추가하기 위해 JavaScript 파일을 만들어야 합니다. 이 파일을 "calendar.js"로 저장합니다.

이 파일에서는 월간 달력 테이블을 생성하는 함수를 정의합니다.

function createCalendar(month, year) {
    var weekdays = ["日","一","二","三","四","五","六"];
    var calendarBody = document.getElementById("calendarBody");
    var daysInMonth = new Date(year, month+1, 0).getDate();
    var date = new Date(year, month, 1);
    var row = document.createElement("tr");

    for (var i = 0; i < weekdays.length; i++) {
        var cell = document.createElement("th");
        cell.innerText = weekdays[i];
        row.appendChild(cell);
    }

    calendarBody.appendChild(row);

    for (var i = 1; i <= daysInMonth; i++) {
        var newDate = new Date(year, month, i);
        var dayOfWeek = newDate.getDay();
        if (dayOfWeek === 0) {
            row = document.createElement("tr");
            calendarBody.appendChild(row);
        }
        var cell = document.createElement("td");
        cell.innerText = i;
        row.appendChild(cell);
    }
}

로그인 후 복사

이 함수에서는 먼저 일요일부터 토요일까지의 이름을 저장하는 배열을 정의합니다. document.getElementById 메소드를 통해 tbody 요소도 얻어왔고 이번달의 일수와 첫날의 날짜도 얻어왔습니다. 다음으로, 테이블 헤더 행을 생성하고 이 행에 요일 이름이 포함된 헤더 셀을 추가했습니다. 그런 다음 날짜 셀을 행별로 추가하고 날짜 셀이 일요일을 만나면 새 행을 만듭니다.

다음으로 월별 달력의 이번 달을 업데이트하는 함수를 추가해야 합니다.

function updateCalendar() {
    var currentMonth = document.getElementById("currentMonth");
    var currentDate = new Date();
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    currentMonth.innerText = year + "年" + (month+1) + "月";
    createCalendar(month, year);
}

로그인 후 복사

이 함수에서는 먼저 document.getElementById 메서드를 사용하여 이번 달의 h1 요소를 가져온 다음 날짜를 생성합니다. 현재 날짜, 월, 연도를 가져오고 h1 요소의 innerText 속성을 설정하는 개체입니다.

마지막으로 updateCalendar 함수를 호출하여 월별 달력을 생성해야 합니다.

window.onload = function() {
    updateCalendar();
}

로그인 후 복사

이 코드는 페이지가 완전히 로드된 후 updateCalendar 함수를 호출합니다.

이제 월간달력 제작이 완료되었습니다. 이제 브라우저에서 이 HTML 파일을 열고 생성된 월별 달력을 볼 수 있습니다.

위 내용은 JavaScript로 월간 달력을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!