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

Implementierung eines laufenden Springboot-Projekts mit Docker

Einführung: Die Konfiguration von Docker, auf dem...

$nextTick-Erklärung, die Sie auf einen Blick verstehen

Inhaltsverzeichnis 1. Funktionsbeschreibung 2. Üb...

Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen

Vorwort Dieser Artikel verwendet die neuen Funkti...

Lernen Sie Node.js von Grund auf

Inhaltsverzeichnis URL-Modul 1.Parse-Methode 2. F...

JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten

Inhaltsverzeichnis Definition Grammatik Beispiele...

Beispielcode zur Implementierung von Anti-Shake in Vue

Anti-Shake: Verhindert, dass wiederholte Klicks E...

Vergleich zwischen Node.js und Deno

Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...

Detaillierte Erklärung der .bash_profile-Datei im Linux-System

Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....

Lösung zum Einfügen eines Formulars mit einer Leerzeile oben und unten

Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...