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:
|
<<: Installation von Docker CE auf Ubuntu
>>: Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung
Artikel empfehlen
Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)
In einem Artikel vor langer Zeit habe ich über di...
js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen
Heute werden wir einen einfachen Fall durchgehen ...
Implementierung der CSS3-Button-Randanimation
Erster Blick auf die Wirkung: html <a href=&qu...
Implementierung der Beschleunigung der Docker-Installation und -Konfigurationsabbildung
Inhaltsverzeichnis Docker-Version Installieren Si...
Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung
Der häufigste Fehler vieler Website-Designer ist,...
HTML-Tutorial: Sortierte Listen
<br />Originaltext: http://andymao.com/andy/...
Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet
In diesem Artikel wird der spezifische Code der b...
Von VirtualBox erstellte virtuelle Debian-Maschine teilt Dateien mit dem Windows-Host
der Begriff: 1. VM: Virtuelle Maschine Schritt: 1...
Was sind MySQL-Dirty-Pages?
Inhaltsverzeichnis Schmutzige Seiten (Speichersei...
XHTML: Rahmenstruktur-Tag
Rahmenstruktur-Tag <frameset></frameset&...
So führen Sie Befehle auf einem Remote-Linux-System über SSH aus
Manchmal müssen wir einige Befehle auf einem Remo...
So verwenden Sie Binlog zur Datenwiederherstellung in MySQL
Vorwort Kürzlich wurden Daten online falsch bearb...
Detaillierte Schritte zum Konfigurieren des Tomcat-Servers in IDEA 2020
Die Schritte zum Konfigurieren von Tomcat in IDEA...
MariaDB-Serverinstallation der MySQL-Reihe
Inhaltsverzeichnis Tutorial-Reihe 1. Installieren...
JavaScript zum Erzielen eines Kalendereffekts
In diesem Artikel wird der spezifische Code für J...