자바스크립트 연간 달력 설정
- 王林원래의
- 2023-05-21 13:20:07493검색
인터넷 기술이 지속적으로 발전함에 따라 점점 더 많은 웹사이트와 애플리케이션에 캘린더 기능이 필요하게 되었습니다. 프론트 엔드 개발에서 JavaScript는 가장 일반적으로 사용되는 언어 중 하나이며 달력 기능을 구현하는 일반적인 방법 중 하나입니다. 이 기사에서는 JavaScript를 사용하여 연간 달력을 설정하는 방법을 보여 드리겠습니다.
1단계: HTML 스켈레톤 및 CSS 스타일 만들기
먼저 HTML 스켈레톤과 필요한 CSS 스타일을 만들 수 있습니다. 다음은 간단한 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>年历设置</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.calendar {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.month {
flex-basis: calc(100% / 4 - 20px);
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.month-header {
background-color: #007bff;
color: #fff;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.weekdays {
display: flex;
background-color: #efefef;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.day {
flex-basis: calc(100% / 7);
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.today {
background-color: #007bff;
color: #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="calendar">
<!-- 生成的年历内容将在此处添加 -->
</div>
</body>
</html>2단계: JavaScript를 사용하여 책력 생성
이제 JavaScript를 사용하여 책력을 생성할 수 있습니다. 코드 예는 다음과 같습니다.
// 获取年份
const year = new Date().getFullYear();
// 获取月份名称
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
// 生成月历函数
function generateMonth(monthIndex) {
// 创建月历元素
const monthElement = document.createElement("div");
monthElement.classList.add("month");
// 创建月份名称元素
const headerElement = document.createElement("div");
headerElement.classList.add("month-header");
headerElement.textContent = months[monthIndex];
monthElement.appendChild(headerElement);
// 创建星期名称元素
const weekdaysElement = document.createElement("div");
weekdaysElement.classList.add("weekdays");
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
weekdays.forEach(function(weekday) {
const weekdayElement = document.createElement("div");
weekdayElement.classList.add("day");
weekdayElement.textContent = weekday;
weekdaysElement.appendChild(weekdayElement);
});
monthElement.appendChild(weekdaysElement);
// 获取当前月份的天数
const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
// 获取当前月份的第一天是星期几
const firstDayOfWeek = new Date(year, monthIndex, 1).getDay();
// 生成日期元素
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement("div");
dayElement.classList.add("day");
dayElement.textContent = day;
// 如果是今天，将其设置为特殊样式
if (
year === new Date().getFullYear() &&
monthIndex === new Date().getMonth() &&
day === new Date().getDate()
) {
dayElement.classList.add("today");
}
monthElement.appendChild(dayElement);
}
return monthElement;
}
// 生成12个月的月历
for (let i = 0; i < 12; i++) {
const monthElement = generateMonth(i);
document.querySelector(".calendar").appendChild(monthElement);
}위 코드는 12개월을 포함하는 연간 달력을 생성합니다. 코드에서는 Date 객체와 JavaScript 루프 함수를 사용합니다. Date 객체는 날짜와 시간에 대한 정보를 얻기 위해 사용되며, 루프 함수는 요일 요소와 날짜 요소를 생성하는 데 사용됩니다.
3단계: CSS 스타일 개선
이제 기본 HTML 및 JavaScript 코드가 있지만 연감 스타일이 우리 요구 사항을 정확하게 충족하지 못할 수 있습니다. 이 단계에서는 CSS를 사용하여 스타일을 완성해 보겠습니다. 전체 CSS 스타일 코드는 다음과 같습니다.
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.calendar {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.month {
flex-basis: calc(100% / 4 - 20px);
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.month-header {
background-color: #007bff;
color: #fff;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.weekdays {
display: flex;
background-color: #efefef;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.day {
flex-basis: calc(100% / 7);
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.today {
background-color: #007bff;
color: #fff;
border-radius: 50%;
}
@media only screen and (max-width: 768px) {
.month {
flex-basis: calc(100% / 2 - 10px);
margin-right: 10px;
}
}위 스타일 코드는 기본 스타일을 재정의하고 반응형 적응성에 대한 일부 지원을 추가합니다. @media 쿼리는 특정 화면 너비에 도달하면 월별 달력의 스타일을 변경하는 데 사용됩니다.
이 시점에서 우리의 연간 달력이 완성되었습니다! 위의 코드를 HTML 파일에 복사하여 열면 방금 생성한 연감을 볼 수 있습니다.
Summary
이 기사에서는 JavaScript를 사용하여 간단한 연간 달력을 설정하는 방법을 보여주었습니다. Date 객체, 루프 기능 및 CSS 스타일을 사용하여 아름답고 실용적인 연간 달력을 생성했습니다. 이 예제가 귀하의 프런트엔드 개발 작업에 영감을 줄 수 있기를 바랍니다.
위 내용은 자바스크립트 연간 달력 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!