JavaScript implementiert schnell Kalendereffekte

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur schnellen Erzielung des Kalendereffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Rendern

Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    * {
      Rand: 0;
      Polsterung: 0;

    }

    #Kalender {
      Hintergrundfarbe: #9900ff;
      Farbe: #fff;
      Rahmenradius: 5px;
      Rand: 100px automatisch;
    }

    #Titel {
      Schriftgröße: 1,4em;
      Polsterung: 4px 0,55em;
    }

    #Tage {
      Schriftstärke: fett;
      Textausrichtung: zentriert;
      Polsterung: 4px 0,55em;
    }

    #Kalender td {
      Textausrichtung: zentriert;
      Polsterung: 4px 20px;
    }

    #Heute {
      Farbe: #f00;
      Schriftstärke: fett;
    }

    .Punkt {
      Cursor: Zeiger;
      Cursor: Hand;
    }
  </Stil>
  <Skript>
    fenster.onload = funktion(){
      var form = document.getElementById('Kalender');
      //Rufen Sie die eigene Init-Methode des Kalenderobjekts auf calendar.init(form);
    }
    var Kalender = {
      Jahr: null,
      Monat: null,
      //Tagesarray dayTable: null,
      // Initialisierungsfunktion init(form) {
        // 1 Holen Sie sich das Tages-Array this.dayTable=form.getElementsByTagName('td');
        //2 Erstellen Sie einen Kalender und übergeben Sie die aktuelle Uhrzeit this.createCalendar(form,new Date());
        var nextMon=form.getElementsByTagName('th')[2];
        var preMon=form.getElementsByTagName('th')[0];
        preMon.onclick=Funktion(){
        Kalender.ClearCalendar(Formular)
          var preDate = neues Datum (Kalender.Jahr, Kalender.Monat-1,1);
          Kalender.createCalendar(Formular,preDate)
        }
        nextMon.onclick=Funktion(){
          Kalender.ClearCalendar(Formular)
          var nächstesDate=neues Datum(Kalender.Jahr, Kalender.Monat+1,1);
          calendar.createCalendar(Formular,nächstesDatum)
        }
      },
      // Kalenderdaten löschen clearCalendar(form) {
        var tds = form.getElementsByTagName('td');
        für (var i = 0; i < tds.length; i++) {
          tds[i].innerHTML='&nbsp';
          // Heutigen Stil löschen tds[i].id='';
        }
      },
      // 3 Kalender generieren // aus Tabelle date das zu erstellende Datum createCalendar(form,date){
        //Das aktuelle Jahr abrufen this.year=date.getFullYear(); 
         //Den aktuellen Monat abrufen this.month=date.getMonth();

         //Jahr und Monat in den Kalender schreiben form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
         //Anzahl der Tage in diesem Monat abrufen var dataNum=this.getDateLen(this.year,this.month);
         var ersterTag = this.getFristDay(calendar.year,calendar.month);
        // Schleife und schreibe die Nummer jedes Tages in den Kalender. // Lasse i das Datum darstellen.
        für (var i = 1; i <= Datenzahl; i++) {
          diese.Tagestabelle[fristigerTag+i-1].innerHTML=i;
          var nowDate = neues Datum();
          wenn(i == nowDate.getDate() && kalender.monat == nowDate.getMonth() && kalender.jahr == nowDate.getFullYear()){
            // Setze die ID des aktuellen Elements auf heute
            Kalender.Tagestabelle[i+FristTag-1].id = "heute";
          }
        }
      },
       // Anzahl der Tage in diesem Monat abrufen getDateLen(year,month){
        //Ersten Tag des nächsten Monats abrufen var nextMonth=new Date(year,month+1,1);
        // Stelle die Stunde des ersten Tages des nächsten Monats ein – 1, also die Stunde des letzten Tages des letzten Monats. Subtrahiere einen Wert, der 24 Stunden nicht überschreitet nextMonth.setHours(nextMonth.getHours()-1);
        //Holen Sie sich das Datum des nächsten Monats, das der letzte Tag des vorherigen Monats ist.
        gibt nächsten Monat zurück.getDate();
       },
       // Den ersten Tag des Monats abrufen.
      getFristDay:Funktion(Jahr,Monat){
        var firstDay=neues Datum(Jahr,Monat,1);
        gibt erstenTag zurück.getDay();
      }
    } 
  </Skript>
</Kopf>

<Text>
  <table id="Kalender">
    <tr>
      <!-- Pfeil nach links -->
      <th class="Punkt">&lt;&lt;</th>
      <!-- Jahr Monat -->
      <th id="Titel" colspan="5"></th>
      <!-- Pfeil nach rechts -->
      <th class="poin">&gt;&gt;</th>
    </tr>
    <tr id="Tage">
      <th>Tag</th>
      <th>Von</th>

      <th>Zwei</th>
      <th>drei</th>
      <th>Vier</th>
      <th>Fünf</th>
      <th>sechs</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </Tabelle>

</body>

</html>

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:

js css+html zur Realisierung eines einfachen Kalenders
Eine Anleitung zur Verwendung von calendar.js, einem leichten nativen JS-Kalender-Plugin
JS lernt eine einfache Kalendersteuerung
JS-Kalender-Empfehlung
Vue.js erstellt Kalendereffekt
Reiner js einfacher Kalender-Implementierungscode
js schreibt einen einfachen Kalendereffekt für den Tag [Implementierungscode]
js Kalendersteuerung (minutengenau)
PHP+Javascript-Kalendersteuerung
Beispielcode für einfaches JS-Kalendersteuerelement

<<: Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

>>: Führen Sie die folgenden Schritte aus, um HugePages schnell unter Linux zu konfigurieren