JavaScript-Code zum Erzielen eines einfachen Kalendereffekts

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung eines einfachen Kalendereffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Die Wirkung ist wie folgt:

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;
   Box-Größe: Rahmenbox;
  }
  
  #Kasten {
   Breite: 400px;
   Höhe: 502px;
   Rand: 2px durchgehend orange;
   Rand: 50px automatisch;
   Schriftgröße: 48px;
   Textausrichtung: zentriert;
  }
  
  #ym {
   Höhe: 100px;
   Zeilenhöhe: 100px;
  }
  
  #D {
   Höhe: 200px;
   Zeilenhöhe: 200px;
   Hintergrundfarbe: orange;
   Schriftgröße: 72px;
  }
  
  #w {
   Höhe: 100px;
   Zeilenhöhe: 100px;
  }
  
  #hms {
   Höhe: 100px;
   Zeilenhöhe: 100px;
  }
 </Stil>
</Kopf>

<Text>
 <div id="box">
  <div id="ym"></div>
  <div id="d"></div>
  <div id="w"></div>
  <div id="hms"></div>

 </div>
 <Skript>
  //Rufen Sie die Methode getDateAndTime auf getDateAndTime();

  //Starten Sie den Timer und rufen Sie die Methode getDateAndTime auf window.setInterval(getDateAndTime, 1000);

  Funktion getDateAndTime() {


   // Aktuelles Datum und Uhrzeit des Systems abrufen var date = new Date();

   //Extrahieren Sie die Elemente von Datum und Uhrzeit var year = date.getFullYear();
   var Monat = Datum.getMonth() + 1;
   var Tag = Datum.getDate();
   var Woche = Datum.getDay();
   var Stunde = Datum.getHours();
   var minute = date.getMinutes();
   var Sekunde = date.getSeconds();

   //Verarbeite den Wochenformatwechsel (Woche) {
    Fall 0:
     Woche = 'Sonntag';
     brechen;
    Fall 1:
     Woche = 'Montag';
     brechen;
    Fall 2:
     Woche = 'Dienstag';
     brechen;
    Fall 3:
     Woche = 'Mittwoch';
     brechen;
    Fall 4:
     Woche = 'Donnerstag';
     brechen;
    Fall 5:
     Woche = 'Freitag';
     brechen;
    Fall 6:
     Woche = 'Samstag';
     brechen;


   }
   //Funktion zur Verarbeitung des Stunden-, Minuten- und Sekundenformats definieren function formatHMS(time) {
    wenn (Zeit < 10) {
     gibt „0“ + Zeit zurück;
    } anders {
     Rückgabezeit;
    }
   }

   //Seitenelement abrufen var ym = document.getElementById('ym');
   var d = document.getElementById('d');
   var w = document.getElementById('w');
   var hms = document.getElementById('hms');
   //Datum und Uhrzeit auf die Seite schreiben ym.innerHTML = year + 'year' + month + 'month';
   d.innerHTML = Tag;
   w.innerHTML = Woche;
   hms.innerHTML = Stunde + „Stunde“ + Minute + „Minute“ + Sekunde + „Sekunde“;

  }
 </Skript>

</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
Vue.js erstellt Kalendereffekt
JS-Kalender-Empfehlung
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

<<: Installation von Docker CE auf Ubuntu

>>: Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung