JS implementiert einfachen Kalendereffekt

JS implementiert einfachen Kalendereffekt

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

Artikel empfehlen

JavaScript, um die Idee des Schlangenspiels umzusetzen

Die Implementierungsidee des Javascript-Spiels Sn...

Verwendungsanweisungen für den Befehl „Docker Create“

Mit dem Befehl „Docker Create“ können Sie einen C...

Eine kurze Analyse des MySQL-Index

Ein Datenbankindex ist eine Datenstruktur, deren ...

Verstehen Sie die Grundlagen von Navicat für MySQL in einem Artikel

Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...

JS implementiert Anforderungsdispatcher

Inhaltsverzeichnis Abstraktion und Wiederverwendu...

Einführung in die allgemeine API-Verwendung von Vue3

Inhaltsverzeichnis Veränderungen im Lebenszyklus ...

js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung

In diesem Artikelbeispiel wird der spezifische Co...

Einfaches Webdesign-Konzept – Farbabstimmung

(I) Grundkonzepte der Farbabstimmung auf Webseiten...

Beispiele für JavaScript-Entschüttelungen und Drosselung

Inhaltsverzeichnis Stabilisierung Drosselung: Ant...

Einführung in Docker-Container

Docker-Übersicht Docker ist eine Open-Source-Lösu...

Probleme beim Erstellen von Platzhaltern für HTML-Auswahlfelder

Ich verwende einen Platzhalter in einer Texteinga...

So konfigurieren Sie Umgebungsvariablen in einer Linux-Umgebung

JDK-Downloadadresse: http://www.oracle.com/techne...