Heim > Artikel > Web-Frontend > So erstellen Sie einen Monatskalender mit JavaScript

So erstellen Sie einen Monatskalender mit JavaScript

王林Original: 2023-05-16 12:45:08690Durchsuche

Einführung in die Erstellung eines Monatskalenders mit JavaScript

JavaScript ist eine Programmiersprache für die Webentwicklung. Es handelt sich um eine dynamische Skriptsprache, die normalerweise für die clientseitige Webentwicklung verwendet wird. In diesem Artikel stellen wir vor, wie Sie mit JavaScript einen einfachen Monatskalender auf einer Webseite erstellen.

Anforderungen:

Bevor wir den Monatskalender erstellen, benötigen wir die folgenden Dateien:

1. Eine HTML-Datei zum Erstellen einer Weboberfläche#🎜 🎜 #

2. CSS-Datei zum Anwenden von Stilen auf HTML-Dateien

3. JavaScript-Datei zum Hinzufügen der Funktionalität eines Monatskalenders

Beginnen wir mit dem Beginn Beginnen Sie mit der Erstellung eines Monatskalenders.

HTML-Datei erstellen

Erstellen Sie zunächst eine HTML-Datei. Wir können sie von Grund auf neu schreiben oder eine Vorlage verwenden und sie als .html-Datei speichern. Fügen Sie der Datei den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>月历</title>
</head>
<body>
    <h1 id="currentMonth">月历</h1>
    <table>
        <thead>
            <tr>
                <th>星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody id="calendarBody">
        </tbody>
    </table>

    <script type="text/javascript" src="calendar.js"></script>
</body>
</html>

In dieser HTML-Datei definieren wir ein h1-Tag mit dem Titel „Month Calendar“ und fügen ein Attribut mit der ID „currentMonth“ innerhalb des Tags hinzu. Dieses Attribut wird sein Wird verwendet, um den aktuellen Monat im JavaScript-Code anzuzeigen. Wir verwenden auch ein Tabellen-Tag, um den Kalender anzuzeigen. Diese Tabelle enthält sieben Spalten, die der Sieben-Tage-Woche entsprechen. Ein tbody-Tag wird verwendet, um die Monatskalendertabelle im JavaScript-Code zu generieren, und wir haben außerdem ein Skript-Tag hinzugefügt, das unsere JavaScript-Datei enthält, die zum Generieren des Monatskalenders für die Seite verwendet wird.

Wir können dieser HTML-Datei auch einige CSS-Stile hinzufügen, um die Seite zu verschönern:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    text-align: center;
}

th {
    height: 25px;
    background-color: #cccccc;
}

td {
    height: 50px;
}

Diese Stile fügen den Tabellen-, th- und td-Elementen einige grundlegende Stile hinzu Seite .

JavaScript-Datei erstellen

Jetzt müssen wir eine JavaScript-Datei erstellen, um der Seite eine Monatskalenderfunktion hinzuzufügen. Wir speichern diese Datei als „calendar.js“.

In dieser Datei definieren wir eine Funktion zum Erstellen einer monatlichen Kalendertabelle:

function createCalendar(month, year) {
    var weekdays = ["日","一","二","三","四","五","六"];
    var calendarBody = document.getElementById("calendarBody");
    var daysInMonth = new Date(year, month+1, 0).getDate();
    var date = new Date(year, month, 1);
    var row = document.createElement("tr");

    for (var i = 0; i < weekdays.length; i++) {
        var cell = document.createElement("th");
        cell.innerText = weekdays[i];
        row.appendChild(cell);
    }

    calendarBody.appendChild(row);

    for (var i = 1; i <= daysInMonth; i++) {
        var newDate = new Date(year, month, i);
        var dayOfWeek = newDate.getDay();
        if (dayOfWeek === 0) {
            row = document.createElement("tr");
            calendarBody.appendChild(row);
        }
        var cell = document.createElement("td");
        cell.innerText = i;
        row.appendChild(cell);
    }
}

In dieser Funktion definieren wir zunächst ein Array zum Speichern der Namen von Sonntag bis Samstag. Wir haben auch das tbody-Element über die Methode document.getElementById abgerufen und die Anzahl der Tage im aktuellen Monat sowie das Datum des ersten Tages erhalten. Als Nächstes haben wir eine Tabellenkopfzeile erstellt und in dieser Zeile eine Kopfzelle mit dem Namen des Wochentags hinzugefügt. Anschließend fügen wir zeilenweise Datumszellen hinzu, und wenn eine Datumszelle auf einen Sonntag trifft, erstellen wir eine neue Zeile.

Als nächstes müssen wir eine Funktion hinzufügen, um den aktuellen Monat des Monatskalenders zu aktualisieren:

function updateCalendar() {
    var currentMonth = document.getElementById("currentMonth");
    var currentDate = new Date();
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    currentMonth.innerText = year + "年" + (month+1) + "月";
    createCalendar(month, year);
}

In dieser Funktion verwenden wir zunächst die Methode document.getElementById, um die zu erhalten h1-Element des aktuellen Monats und erstellen Sie dann ein Date-Objekt, um das aktuelle Datum, den aktuellen Monat und das aktuelle Jahr abzurufen, und legen Sie das innerText-Attribut des h1-Elements fest.

Zuletzt müssen wir die Funktion „updateCalendar“ aufrufen, um den Monatskalender zu generieren:

window.onload = function() {
    updateCalendar();
}

Dieser Code ruft die Funktion „updateCalendar“ auf, nachdem die Seite vollständig geladen ist.

Zu diesem Zeitpunkt haben wir die Produktion des Monatskalenders abgeschlossen. Jetzt können wir diese HTML-Datei im Browser öffnen und den generierten Monatskalender sehen.

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

JavaScript css html date Calendar JS 对象 table tbody td th

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：Javascript fügt eine Objektmethode hinzuNächster Artikel：Javascript fügt eine Objektmethode hinzu

In Verbindung stehende Artikel

Mehr sehen