JavaScript로 1년 달력을 만드는 방법
- WBOY원래의
- 2023-05-12 14:44:081432검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!