So erstellen Sie einen Ganzjahreskalender mit JavaScript-Front-End-Fragen und Antworten-php.cn

So erstellen Sie einen Ganzjahreskalender mit JavaScript

WBOY

Freigeben： 2023-05-12 14:44:08

Original

1448 Leute haben es durchsucht

JavaScript ist eine sehr beliebte Programmiersprache, mit der sich eine Vielzahl von Anwendungen und Websites erstellen lassen. Eine der nützlichsten Anwendungen ist die Erstellung eines Ganzjahreskalenders. Der Ganzjahreskalender ist ein Kalendertool, das alle Termine das ganze Jahr über anzeigen kann. Er eignet sich sehr gut als praktisches Zeitmanagement- und Aufzeichnungstool und kann auch dabei helfen, zukünftige Zeitpläne besser zu planen und zu organisieren.

In diesem Artikel stellen wir Ihnen vor, wie Sie einen Ganzjahreskalender in JavaScript erstellen, sodass Sie JavaScript-Programmierkenntnisse erlernen und üben können.

Schritt eins: HTML-Skelett

Um einen Ganzjahreskalender zu erstellen, müssen Sie zunächst einen Container auf der HTML-Seite erstellen, um den gesamten Kalender zu platzieren. Unten ist unser HTML-Gerüst:

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

Nach dem Login kopieren

In diesem Gerüst haben wir ein DIV-Element namens „calendar“ erstellt, das zur Aufnahme unseres Kalenders verwendet wird.

Schritt zwei: CSS-Stile

Damit unser Kalender schön und leicht lesbar aussieht, müssen wir CSS-Stile hinzufügen. Hier ist unser CSS-Code:

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

Nach dem Login kopieren

Im obigen Code legen wir einige grundlegende Stile für den Container fest und setzen den Tabellenzellenrand auf eine durchgezogene graue Linie mit 1 Pixel. Wir legen außerdem einige Farben und Schriftgrößen für die Titel-, Kopfzeilen- und Tabellendatenzellen fest.

Schritt drei: JavaScript-Code

Jetzt verwenden wir JavaScript, um unseren Ganzjahreskalender dynamisch zu generieren. Wir verwenden Date-Objekte, um Datumsangaben abzurufen und zu berechnen, und DOM-Operationen, um unsere HTML-Elemente zu erstellen und zu aktualisieren. Unten finden Sie den vollständigen JavaScript-Code:

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

Nach dem Login kopieren

Im obigen Code rufen wir zunächst das aktuelle Datum ab und speichern den aktuellen Monat und das aktuelle Jahr. Anschließend haben wir mithilfe der DOM-Manipulation einen Titel, eine Tabelle und eine Kopfzeile erstellt. Als nächstes verwenden wir eine verschachtelte Schleife, um die Tabelle für jeden Monat zu berechnen und zu erstellen. Wir erstellen zunächst Zeilen in der Tabelle und dann Zellen innerhalb jeder Zeile. Wir verwenden ein Date-Objekt, um das Datum in jeder Zelle zu berechnen und es der Zelle hinzuzufügen. Wir haben außerdem einen Klassennamen für das aktuelle Datum hinzugefügt, damit wir dessen Stil mithilfe von CSS ändern können. Schließlich fügen wir der ersten Spalte jedes Monats eine Überschrift hinzu, um den aktuellen Monat anzuzeigen.

Schritt 4: Testen

Jetzt testen wir unseren Code im Browser. Öffnen Sie Ihren Browser und geben Sie die URL der HTML-Datei in die Adressleiste ein. Sie sollten nun einen schönen Ganzjahreskalender mit allen Monaten vom aktuellen Monat bis zum nächsten Jahr sehen.

Fazit

Dieser Artikel zeigt, wie man mithilfe von JavaScript dynamisch einen Ganzjahreskalender erstellt. Um dies zu erreichen, verwenden wir DOM-Operationen, Datumsobjekte und CSS. Durch das Erlernen und Üben dieses Projekts können Sie Ihre JavaScript-Programmierkenntnisse verbessern und erhalten ein praktisches Zeitmanagement-Tool.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Ganzjahreskalender mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!