Heim > Artikel > Web-Frontend > Javascript legt den Jahreskalender fest

Javascript legt den Jahreskalender fest

王林Original: 2023-05-21 13:20:07493Durchsuche

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie benötigen immer mehr Websites und Anwendungen Kalenderfunktionen. In der Frontend-Entwicklung ist JavaScript eine der am häufigsten verwendeten Sprachen und eine der gebräuchlichsten Methoden zur Implementierung von Kalenderfunktionen. In diesem Artikel zeige ich Ihnen, wie Sie mit JavaScript einen Jahreskalender einrichten.

Schritt 1: HTML-Gerüst und CSS-Stile erstellen

Wir können zunächst ein HTML-Gerüst und die erforderlichen CSS-Stile erstellen. Hier ist ein einfaches Beispiel:

<!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>

Schritt 2: Verwenden Sie JavaScript, um den Almanach zu generieren

Jetzt können wir JavaScript verwenden, um den Almanach zu generieren. Hier ist das Codebeispiel:

// 获取年份
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);
}

Der obige Code generiert einen Jahreskalender mit 12 Monaten. Im Code verwenden wir Datumsobjekte und JavaScript-Schleifenfunktionen. Das Date-Objekt wird verwendet, um Informationen über Datum und Uhrzeit zu erhalten, und die Schleifenfunktion wird verwendet, um Wochentagselemente und Datumselemente zu generieren.

Schritt 3: CSS-Stil verfeinern

Jetzt haben wir den grundlegenden HTML- und JavaScript-Code, aber der Stil des Almanachs entspricht möglicherweise nicht genau unseren Anforderungen. In diesem Schritt verwenden wir CSS, um das Styling zu vervollständigen. Hier ist der vollständige CSS-Stilcode:

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;
    }
}

Der obige Stilcode überschreibt den Standardstil und fügt etwas Unterstützung für reaktionsfähige Anpassungsfähigkeit hinzu. Die @media-Abfrage wird verwendet, um den Stil des Monatskalenders zu ändern, wenn eine bestimmte Bildschirmbreite erreicht ist.

Jetzt ist unser Jahreskalender fertig! Sie können den obigen Code in eine HTML-Datei kopieren und öffnen und dann den Almanach sehen, den wir gerade erstellt haben.

Zusammenfassung

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit JavaScript einen einfachen Jahreskalender einrichten. Wir haben Datumsobjekte, Schleifenfunktionen und CSS-Stile verwendet. Mit diesen Methoden haben wir erfolgreich einen schönen und praktischen Jahreskalender erstellt. Ich hoffe, dieses Beispiel kann Ihnen Inspiration für Ihre Frontend-Entwicklungsarbeit geben.

Das obige ist der detaillierte Inhalt vonJavascript legt den Jahreskalender fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-DruckeinstellungenNächster Artikel：CSS-Druckeinstellungen

In Verbindung stehende Artikel

Mehr sehen