Benutzerdefinierter Kalendereffekt in JavaScript

In diesem Artikel wird der spezifische Code des benutzerdefinierten Kalendereffekts in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Implementierungsidee: Holen Sie sich den Wochentag am ersten Tag jedes Monats, füllen Sie dann die vorherigen Tage leer aus, holen Sie sich die Anzahl der Tage in jedem Monat, füllen Sie eine Schleife aus, beurteilen Sie und fügen Sie der aktuellen Zeit einen separaten Stil hinzu und ändern Sie den Monat, wenn Sie auf den vorherigen Monat und den nächsten Monat klicken.

Holen Sie sich den ersten Tag des aktuellen Monats: Der Rückgabewert ist eine Ganzzahl zwischen 0 (Sonntag) und 6 (Samstag).

var date = neues Datum();
var y=date.getFullYear();
var m=date.getMonth();
neues Datum(j,m,1).getDay();

Holen Sie sich die Anzahl der Tage im aktuellen Monat

var date = neues Datum();
var y=date.getFullYear();
var m=date.getMonth();
neues Datum(y,m+1,-1).getDate()+1;

Klicken Sie abschließend auf den Vormonat oder den Folgemonat, um jeweils einen hinzuzufügen bzw. abzuziehen und die gekapselte Kalenderfunktion auszuführen.

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }

        Körper {
            Hintergrund: #2c3e50;
        }

        .Kalender {
            Breite: 400px;
            Rand: 50px automatisch;
        }

        .Kalender-Tipp {
            Schriftgröße: 16px;
            Textausrichtung: zentriert;
            Farbe: #fff;
        }

        .vorherige {
            schweben: links;
            Cursor: Zeiger;
        }

        .nächste {
            schweben: rechts;
            Cursor: Zeiger;
        }

        .Kalendermonat {
            Textausrichtung: zentriert;
            Rand: 10px 0;
            Farbe: #fff;
        }

        ul {
            Listenstil: keiner;
            Anzeige: Flex;
        }

        li {
            Breite: 57px;
            Textausrichtung: zentriert;
            Höhe: 55px;
            Zeilenhöhe: 55px;
            Schriftgröße: 16px;
            Farbe: #fff;
        }

        .Kalendertag {
            Anzeige: Flex;
        }

        .Kalender-Tagesspanne {
            biegen: 1;
            Farbe: #fff;
            Textausrichtung: zentriert;
            Höhe: 40px;
            Zeilenhöhe: 40px;

        }

        .Kalenderdaten {
            Anzeige: Flex;
            Flex-Wrap: Umwickeln;
        }

        li {
            Breite: 57px;
            Cursor: Zeiger;
        }

        li:hover {
            Hintergrund: #2d3436;
        }

        .Kalenderdaten .on {
            Farbe: #d63031;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Kalender">
        <div Klasse="Kalender-Tipp">
            <span class="prev">Vorheriger Monat</span>
            <em id="year">2022</em>
            <span class="next">Nächsten Monat</span>
        </div>
        <div class="calendar-month">Mai</div>
        <div Klasse="Kalendertag">
            <span>Tag</span>
            <span>Groß</span>
            <span>Zwei</span>
            <span>drei</span>
            <span>Vier</span>
            <span>Fünf</span>
            <span>sechs</span>
        </div>
        <ul Klasse="Kalenderdaten">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
    <Skript>
        var date = neues Datum();
        var Jahr = document.querySelector("#Jahr");
        var Monat = document.querySelector(".calendar-month");
        var Kalenderdaten = document.querySelector(".calendar-data");
        var prev = document.querySelector(".prev");
        var weiter = document.querySelector(".weiter");
        var monthArr = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
        var j, m, Tag, d, html, heute;
        Kalender();

        Funktion Kalender() {
            y = date.getFullYear();
            jahr.innerHTML = y + "jahr";

            m = date.getMonth();
            Monat.innerHTML = MonatArr[m];
            day = new Date(y, m, 1).getDay(); //Ersten Tag jedes Monats abrufen d = new Date(y, m + 1, -1).getDate() + 1; //Anzahl der Tage abrufen html = "";

            //Füge die Zeit vor dem ersten Tag jedes Monats in empty ein for (var i = 0; i < day; i++) {
                html + = "<li> </li>";
            }

            für (var j = 1; j <= d; j++) {
                wenn (y==neues Date().getFullYear() && m==neues Date().getMonth() && j== date.getDate()) {
                    html + = "<li Klasse = 'on'>" + j + "</li>";
                } anders {
                    html + = "<li>" + j + "</li>";
                }

            }
            Kalenderdaten.innerHTML = html;
        }

        vorherige.onclick = Funktion () {
            date.setMonth(date.getMonth() - 1);
            Kalender();
        }

        weiter.onclick = Funktion () {
            date.setMonth(date.getMonth() + 1);
            Kalender();
        }
    </Skript>
</body>

</html>

Wirkung:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js css+html zur Realisierung eines einfachen Kalenders
Eine Anleitung zur Verwendung von calendar.js, einem leichten nativen JS-Kalender-Plugin
JS lernt eine einfache Kalendersteuerung
Vue.js erstellt Kalendereffekt
JS-Kalender-Empfehlung
Reiner js einfacher Kalender-Implementierungscode
js Kalendersteuerung (minutengenau)
PHP+Javascript-Kalendersteuerung
So erstellen Sie einen einfachen Kalender mit js+html
JS implementiert einen einfachen Kalender

<<: Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen

>>: Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Detaillierte Erklärung zur Verwendung von INS und DEL zum Markieren von Dokumentänderungen

Benutzerdefinierter Kalendereffekt in JavaScript

Detaillierte Erklärung zur Verwendung von INS und DEL zum Markieren von Dokumentänderungen

Einführung und Verwendung des Javascript-Generators

Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen

Die beste Erklärung zu HTTPS

Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker

Beispiele für den Import und Export von MySQL-Tabellendaten

Empfehlen Sie einen coolen blinkenden Alarmknopf

Detaillierte Erläuterung von Beispielen für JS-Closure- und Garbage-Collection-Mechanismen

Beispiel für die Verwendung von CASE WHEN beim Sortieren in MySQL

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Artikel empfehlen

Lösung für das Problem der MySQL-Transaktionsparallelität

Detaillierte Erklärung der allgemeinen Verwendung von MySQL-Abfragebedingungen

6 Lösungen für die Unfähigkeit von IDEA, eine Verbindung zur MySQL-Datenbank herzustellen

Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.15 Winx64-Dekomprimierungsversion

Detaillierte Erklärung der Rolle und des Prinzips des Schlüssels in Vue

Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers

Docker mountet lokale Verzeichnisse und Datenvolumen-Container-Operationen

Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf

Ein Bugfix für Tomcats automatisches Herunterfahren

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

HTML-Endtag-Problem und W3C-Standard

Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

Das Vue-Projekt realisiert Anmelde- und Registrierungseffekte

Detailliertes Tutorial zur Installation des Apache-Quellcodes und zur Konfiguration des virtuellen Hosts