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:
|
<<: Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen
>>: Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen
Artikel empfehlen
Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
1. Einleitung Gilt es als Aufwärmen alter Themen,...
VMware Workstation-Installation unter Linux
Vom Einsteiger bis zum Neueinsteiger ist das Linu...
So setzen Sie das Root-Passwort in CentOS7 zurück
Beim Verschieben von Bausteinen treten verschiede...
Bei einer guten Refaktorierung geht es nicht nur um die Refaktorisierung des Codes, sondern auch um die Refaktorisierung des Lebens.
Es ist wirklich nicht einfach, eine gute Rekonstr...
15 Vim-Kurzreferenztabellen, die Ihnen helfen, Ihre Effizienz um das N-fache zu steigern
Ich habe im ersten Halbjahr des letzten Jahres an...
Installieren Sie Docker offline, indem Sie RPM und zugehörige Abhängigkeiten mit Yum herunterladen.
Sie können yum verwenden, um alle Abhängigkeiten ...
Detaillierte Beschreibung der chinesischen ffmpeg-Parameter
Details zu den Parametern der Version FFMPEG 3.4....
Vertieftes Verständnis des Implementierungsprinzips des Require Loader
Vorwort Wir sagen oft, dass Node keine neue Progr...
Implementierung der privaten Docker-Bibliothek
Die Installation und Bereitstellung eines private...
MySQL-Operationen: Operationen mit JSON-Datentyp
Im vorherigen Artikel haben wir das ausführliche ...
Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat
Ich habe den Computer neu installiert und die neu...
So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)
Es gibt drei Typen von regulären Matching-Selekto...
Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen
Der Container wurde bereits erstellt. So erfahren...
Details zum Like-Operator in MySQL
1. Einleitung Beim Filtern unbekannter oder teilw...
Das WeChat-Applet ermöglicht das Aufnehmen von Fotos und Auswählen von Bildern aus Alben
In diesem Artikel wird der spezifische Code für d...