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
Einführung: Die Konfiguration von Docker, auf dem...
Inhaltsverzeichnis 1. Funktionsbeschreibung 2. Üb...
MySQL unterscheidet zwischen Groß- und Kleinschre...
VMware-Vorbereitung CentOS-Vorbereitung, hier ist...
MySQL 5.7.17, scheint jetzt die neueste Version z...
Vorwort Dieser Artikel verwendet die neuen Funkti...
Inhaltsverzeichnis URL-Modul 1.Parse-Methode 2. F...
Datenträger automatisch erkennen Konfigurationssc...
Inhaltsverzeichnis Definition Grammatik Beispiele...
Anti-Shake: Verhindert, dass wiederholte Klicks E...
Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...
Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....
Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...
1. Wählen Sie in der Menüleiste „Bearbeiten“ → „V...
Wenn Programmierer täglich TypeScript-/JavaScript...