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

React implementiert eine hochadaptive virtuelle Liste

Inhaltsverzeichnis Vor der Transformation: Nach d...

Wir treiben IE6 alleine in den Untergang

Tatsächlich fragen wir uns jeden Tag, wann IE6 wi...

Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue

Einführung Während des Front-End-Projektentwicklu...

Sollte ich für das mobile Web-WAP Bootstrap oder jQuery Mobile verwenden?

Lösung des Problems Bootstrap ist ein CSS-Framewo...

Detaillierte Erläuterung des Linux-Indexknoten-Inode

1. Einführung in Inode Um Inode zu verstehen, müs...

Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

Manchmal kann das Thema eines Projekts nicht jede...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

In diesem Artikel wird der spezifische Code von j...