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
So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud
Beim Installieren der Datenbank ist folgender Feh...
LINUX Prüft, ob der Port belegt ist
Ich konnte nie herausfinden, ob der Port belegt i...
Beheben Sie das Problem, dass sich die Ränder des Suchfelds und der Suchschaltfläche nicht überlappen können
Als ich heute mit der Baidu-Seite übte, stellte i...
SSM-Projekte werden häufig als War-Pakete bereitgestellt, wobei Tomcat und Maven zur Implementierung der Hot-Deployment-Konfiguration verwendet werden.
Hintergrund Wie wir alle wissen, müssen wir nach ...
Teilen Sie 5 JS-High-Order-Funktionen
Inhaltsverzeichnis 1. Einleitung 2. Rekursion 3. ...
Docker verwendet den Prune-Befehl, um das Nicht-Image zu bereinigen
Inhaltsverzeichnis Die Entstehung und Verwirrung ...
Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen
1. Überprüfen Sie den Zeichensatz 1. Überprüfen S...
Vergleich von 5 CSS-Scrolling-Ceiling-Implementierungsmethoden (Performance-Upgrade-Version)
Vorschau auf die überarbeitete Fassung Dieser Art...
Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat
1. Warum maxPostSize festlegen? Der Tomcat-Contai...
So ändern Sie den MySQL-Zeichensatz
1. Überprüfen Sie den Zeichensatz von MySQL Varia...
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...
So implementieren Sie mit CSS3 eine Warteschlangenanimation ähnlich einer Online-Liveübertragung
Ein Freund in der Gruppe hat zuvor eine Frage ges...
So konfigurieren Sie /var/log/messages im Ubuntu-Systemprotokoll
1. Problembeschreibung Heute muss ich die Systemp...
Schritte zum Bereitstellen von Ingress-Nginx auf K8s
Inhaltsverzeichnis Vorwort 1. Bereitstellung und ...
Sortierung und Paginierung von MySQL-Abfragen
Überblick Da wir die Daten normalerweise nicht di...