자바스크립트 연간 달력 설정-프런트엔드 Q&A-php.cn

자바스크립트 연간 달력 설정

王林

풀어 주다： 2023-05-21 13:20:07

원래의

553명이 탐색했습니다.

인터넷 기술이 지속적으로 발전함에 따라 점점 더 많은 웹사이트와 애플리케이션에 캘린더 기능이 필요하게 되었습니다. 프론트 엔드 개발에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!