In diesem Artikel wird der spezifische JS-Code zur Erzielung eines einfachen Kalendereffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt CSS * { Rand: 0; Polsterung: 0; Listenstil: keiner; } #Kasten { Breite: 280px; Höhe: 360px; Rand: 50px automatisch; Hintergrundfarbe: schwarz; Farbe: Aliceblau; Zeilenhöhe: 40px; } #Kopfzeile { Höhe: 40px; Farbe: Aliceblau; Zeilenhöhe: 40px; } #Header-Spanne { schweben: links; Textausrichtung: zentriert; Rand oben: 10px; Zeilenhöhe: 40px; } #vorherige, #nächste { Breite: 20 %; Zeilenhöhe: 40px; Cursor: Zeiger; } #aktuell { Breite: 60%; Zeilenhöhe: 40px; } #Woche li { Breite: 40px; Textausrichtung: zentriert; schweben: links; Zeilenhöhe: 40px; } #Inhalt li { Breite: 40px; Textausrichtung: zentriert; schweben: links; Zeilenhöhe: 40px; } html <div id="box"> <div id="Kopfzeile"> <span id="prev">Zurück</span> <span id="aktuell"></span> <span id="next">Weiter</span> </div> <ul id="Woche"> <li>Tag</li> <li>Eins</li> <li>Zwei</li> <li>Drei</li> <li>Vier</li> <li>Fünf</li> <li>Sechs</li> </ul> <ul id="Inhalt"> <!-- <li>31</li> <li>1</li> <li>2</li> --> </ul> </div>``` js var current = document.querySelector('#current');//Monatsname var prev = document.querySelector('#prev'); // letzter Monat var next = document.querySelector('#next'); // nächster Monat var content = document.querySelector('#content'); // Datumsinhalt // die Anzahl der anzuzeigenden Tage im vorherigen Monat // herausfinden, welcher Wochentag der erste Tag dieses Monats ist // die maximale Anzahl von Tagen im vorherigen Monat herausfinden und das Datum auf 0 setzen Funktion getPrevDays(Datum) { var Datum = neues Datum(Datum); // Setze das Datum auf den ersten Tag, um den Wochentag zu erhalten date.setDate(1); var Woche = Datum.getDay(); // Setze das Datum auf 0, um den letzten Tag des Vormonats zu erhalten date.setDate(0); var maxDay = date.getDate(); var Liste = []; // Den Bereich der roten Daten durchlaufen und sie in das Array einfügen for (var i = maxDay - week + 1; i <= maxDay; i++) { liste.push(i); } Liste zurückgeben; } // Anzahl der Tage in diesem Monat ermitteln // Monat auf den nächsten Monat verschieben // Datum auf 0 setzen Funktion getNowDays(Datum) { var Datum = neues Datum(Datum); date.setMonth(date.getMonth() + 1); date.setDate(0); var maxDay = date.getDate(); // konsole.log(maxDay) var Liste = []; // für (var i = 1; i <= maxDay; i++) { Liste.push(i) } Liste zurückgeben; } // Die Anzahl der Tage, die im nächsten Monat angezeigt werden sollen function getNextDays(prevDays, nowDays) { var Liste = []; // Einseitiger Kalender mit 42 Tagen, 42 - Tage des letzten Monats - Tage dieses Monats = zeige schließlich die verbleibenden Tage des nächsten Monats an für (var i = 1; i <= 42 - prevDays - nowDays; i++) { Liste.push(i) } Rückgabeliste } var x = 1; // Kapselt den Inhalt des Ausgabedatums ein // x zeichnet den angeklickten Monat auf und ermittelt automatisch die in diesem Monat anzuzeigende Zeit gemäß dem Array über der Monatsfunktion output(x) { arr1 = getPrevDays('2021-' + x); arr2 = getNowDays('2021-' + x); arr3 = getNextDays(arr1.Länge, arr2.Länge); // console.log(arr2); var res = ''; für (var i = 0; i < arr1.Länge; i++) { res += '<li style="color:red;">'; res += arr1[i]; res += '</li>'; } für (var i = 0; i < arr2.length; i++) { res += '<li>'; res += arr2[i]; res += '</li>'; } für (var i = 0; i < arr3.length; i++) { res += '<li style="color:red;">'; res += arr3[i]; res += '</li>'; } // Verketten Sie die Ausgabeergebnisse der drei Arrays und geben Sie „return content.innerHTML = res“ aus. } // Monatsanzeige ausgeben var date = new Date(); current.innerHTML = zeigeMonat(neues Datum()); // Monatsfunktion showMonth(date) { var Datum = neues Datum(Datum); date.setMonth(date.getMonth()); var mon = date.getMonth(); //var Jahr = Datum.getFullyear(); return (Mon + 1) + 'Monat'; } Ausgabe(x); // Nächsten Monat next.onclick = function () { x++; // console.log(x); wenn (x > 12) { x = 1; Ausgabe(x); } anders { current.innerHTML = zeigeMonat('2021-' + x); Ausgabe(x); } } // Letzter Monat prev.onclick = function () { X--; console.log(x); wenn (x < 1) { x = 12; current.innerHTML = zeigeMonat('2021-' + x); Ausgabe(x); } anders { current.innerHTML = zeigeMonat('2021-' + x); Ausgabe(x); } } 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. |
<<: Was tun, wenn Sie das Root-Passwort von Mysql5.7 vergessen (einfache und effektive Methode)
>>: So binden Sie einen Domänennamen an den Nginx-Dienst
Die Implementierungsidee des Javascript-Spiels Sn...
Inhaltsverzeichnis 1. Änderung der Ubuntu-Quelle ...
Mit dem Befehl „Docker Create“ können Sie einen C...
Ein Datenbankindex ist eine Datenstruktur, deren ...
Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...
Inhaltsverzeichnis Abstraktion und Wiederverwendu...
Inhaltsverzeichnis Veränderungen im Lebenszyklus ...
In diesem Artikelbeispiel wird der spezifische Co...
Die Schritte zum Verpacken einer Python-Umgebung ...
(I) Grundkonzepte der Farbabstimmung auf Webseiten...
Inhaltsverzeichnis Stabilisierung Drosselung: Ant...
Externe temporäre Tabellen Eine mit CREATE TEMPOR...
Docker-Übersicht Docker ist eine Open-Source-Lösu...
Ich verwende einen Platzhalter in einer Texteinga...
JDK-Downloadadresse: http://www.oracle.com/techne...