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

JavaScript로 1년 달력을 만드는 방법

WBOY

풀어 주다： 2023-05-12 14:44:08

원래의

1450명이 탐색했습니다.

JavaScript는 다양한 애플리케이션과 웹사이트를 만드는 데 사용할 수 있는 매우 인기 있는 프로그래밍 언어입니다. 가장 유용한 애플리케이션 중 하나는 1년 달력을 만드는 것입니다. 전체 연도 달력은 일년 내내 모든 날짜를 표시할 수 있는 달력 도구로, 편리한 시간 관리 및 기록 도구로 매우 적합하며 사람들이 향후 일정을 더 잘 계획하고 정리하는 데도 도움이 될 수 있습니다.

이 기사에서는 JavaScript 프로그래밍 기술을 배우고 연습할 수 있도록 JavaScript로 1년 달력을 만드는 방법을 소개합니다.

1단계: HTML 뼈대

1년 달력을 만들려면 먼저 HTML 페이지에 전체 달력을 배치할 컨테이너를 만들어야 합니다. 다음은 HTML 뼈대입니다.

<!DOCTYPE html>
<html>
<head>
    <title>全年日历</title>
</head>
<body>
    <div class="calendar"></div>
</body>
</html>

로그인 후 복사

이 뼈대에서는 달력을 보관하는 데 사용할 "calendar"라는 DIV 요소를 만들었습니다.

2단계: CSS 스타일

캘린더를 보기 좋고 읽기 쉽게 만들려면 CSS 스타일을 추가해야 합니다. CSS 코드는 다음과 같습니다.

.calendar {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.calendar h1 {
    text-align: center;
}
.calendar table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.calendar table th {
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
}
.calendar table td {
    text-align: center;
    font-size: 16px;
    border: 1px solid #ccc;
}
.calendar table td.today {
    background-color: #f2f2f2;
}

로그인 후 복사

위 코드에서는 컨테이너에 대한 몇 가지 기본 스타일을 설정하고 테이블 셀 테두리를 1픽셀의 회색 실선으로 설정했습니다. 또한 제목, 머리글 및 표 데이터 셀에 대해 일부 색상과 글꼴 크기를 설정했습니다.

3단계: JavaScript 코드

이제 JavaScript를 사용하여 전체 연도 달력을 동적으로 생성하겠습니다. Date 개체를 사용하여 날짜를 가져오고 계산하고 DOM 작업을 사용하여 HTML 요소를 만들고 업데이트합니다. 다음은 완전한 JavaScript 코드입니다.

const calendar = document.querySelector('.calendar');
const months = [
    "一月", "二月", "三月",
    "四月", "五月", "六月",
    "七月", "八月", "九月",
    "十月", "十一月", "十二月"
];

// 获取当前日期
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();

// 创建并更新标题
const title = document.createElement('h1');
title.textContent = `${currentYear}年`;
calendar.appendChild(title);

// 创建表格
const table = document.createElement('table');
calendar.appendChild(table);

// 创建表头
const thead = document.createElement('thead');
table.appendChild(thead);

const weekdayNames = ["日", "一", "二", "三", "四", "五", "六"];
const tr = document.createElement('tr');
weekdayNames.forEach(day => {
    const th = document.createElement('th');
    th.textContent = day;
    tr.appendChild(th);
});
thead.appendChild(tr);

// 创建并更新表格数据
const tbody = document.createElement('tbody');
table.appendChild(tbody);

// 计算日期并创建表格
for (let month = 0; month < 12; month++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);

    for (let weekday = 0; weekday < 7; weekday++) {
        const td = document.createElement('td');
        tr.appendChild(td);

        // 计算日期
        const date = new Date(currentYear, month, 1 + weekday - new Date(currentYear, month, 1).getDay());

        // 添加日期
        if (date.getMonth() === month) {
            td.textContent = date.getDate();
        }

        // 添加类名
        if (today.toDateString() === date.toDateString()) {
            td.classList.add('today');
        }

        // 添加月份标题
        if (weekday === 0) {
            const th = document.createElement('th');
            th.setAttribute('colspan', 7);
            th.textContent = months[month];
            tbody.appendChild(th);
        }
    }
}

로그인 후 복사

위 코드에서는 먼저 현재 날짜를 가져와 현재 월과 연도를 저장합니다. 그런 다음 DOM 조작을 사용하여 제목, 표 및 헤더를 만들었습니다. 다음으로 중첩 루프를 사용하여 매월 테이블을 계산하고 생성합니다. 먼저 테이블에 행을 만든 다음 각 행 내에 셀을 만듭니다. Date 개체를 사용하여 각 셀의 날짜를 계산하고 이를 셀에 추가합니다. 또한 CSS를 사용하여 스타일을 변경할 수 있도록 현재 날짜에 대한 클래스 이름을 추가했습니다. 마지막으로, 이번 달을 표시하기 위해 매월 첫 번째 열에 헤더를 추가합니다.

4단계: 테스트

이제 브라우저에서 코드를 테스트해 보겠습니다. 브라우저를 열고 주소 표시줄에 HTML 파일의 URL을 입력하면 이번 달부터 다음 해까지의 모든 달이 포함된 멋진 1년 달력이 표시됩니다.

결론

이 문서에서는 JavaScript를 사용하여 1년 달력을 동적으로 생성하는 방법을 보여줍니다. 이를 달성하기 위해 DOM 작업, Date 객체 및 CSS를 사용합니다. 이 프로젝트를 배우고 연습하면 JavaScript 프로그래밍 기술을 향상하고 편리한 시간 관리 도구를 제공할 수 있습니다.

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