JavaScript zum Implementieren einer dynamischen Digitaluhr
|
In diesem Artikel finden Sie den spezifischen Code zur Implementierung einer dynamischen Digitaluhr mit JavaScript als Referenz. Der spezifische Inhalt ist wie folgt Ergebnisse erzielen
Code-Implementierung
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
#Kasten {
Breite: 1000px;
Höhe: 300px;
Hintergrundbild:URL(1.jpg);
Zeilenhöhe: 300px;
Textausrichtung: zentriert;
Schriftgröße: 50px;
Schriftstärke: 500;
Rand: 100px automatisch;
}
</Stil>
</Kopf>
<Text>
<div id="box"></div>
<Skript>
let box = document.getElementById('box')
//Füge Nullen zu Zahlen unter 10 hinzu let addZero = val => val < 10 ? '0' + val : val
//Die arabischen Zahlen der Woche in chinesische Schriftzeichen umwandeln // Wochenzuordnungstabelle let trans = val => {
lass obj = {
0: 'Tag',
1: '一',
2: 'Zwei',
3: 'drei',
4: 'Vier',
5: "Fünf",
6: „Sechs“
}
Rückgabewert Objekt [Wert]
}
setzeZeit ()
//Methode zum Abrufen der Zeitfunktion setTime() {
let Zeit = neues Datum();
let year = time.getFullYear(); // Das Jahr abrufen let month = time.getMonth() + 1; // Den Monat abrufen (er geht von 0 bis 11, also müssen wir 1 hinzufügen)
let date = time.getDate(); // Das Datelet abrufen day = time.getDay(); // Den Wochentag abrufen (0 ist Sonntag)
let hour = time.getHours(); // Stunden abrufenlet min = time.getMinutes(); // Minuten abrufenlet sec = time.getSeconds(); // Sekunden abrufenlet value = year + „Jahr“ + addZero(Monat) + „Monat“ + addZero(Datum) + „Wochentag“ + trans(Tag) + „ „+addZero(Stunde) +
„Stunde“ + addZero(min) + „Minute“ + addZero(sec) + „Sekunde“
// Alles zusammenfügen box.innerText = value
// console.log(Wert)
//Füge die gespleißte Zeit in die Seite ein}
// Lassen Sie den Timer die Methode setTime einmal pro Sekunde ausführen (das ist der Kern der Implementierung der Uhr)
setzeInterval(setTime, 1000)
</Skript>
</body>
</html>Material
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ützt Das könnte Sie auch interessieren:
|
>>: Tutorial zur Installation und Konfiguration der Version MySQL 5.7.23
Artikel empfehlen
Implementierung der benutzerdefinierten MySQL-Listensortierung nach angegebenen Feldern
Problembeschreibung Wie wir alle wissen, lautet d...
Lösen Sie das Problem, dass beim Ausführen von Docker zwei Ports gestartet werden, die unterschiedliche Ports belegen
Problembeschreibung: Nach der Ausführung von dock...
So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung
Linux-Bibliothek generieren Die Linux-Version ver...
CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen
Teil des Codes: Code kopieren Der Code lautet wie...
Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms
1. Vue – Das erste Vue-CLI-Programm Die Entwicklu...
Detaillierte Erläuterung der benutzerdefinierten Ereignisinhaltsverteilung von Vue
1. Dies ist etwas kompliziert zu verstehen. Ich h...
Verschönerung der Dualsystem-Boot-Schnittstelle für Win10 + Ubuntu20.04 LTS
Effektanzeige Die eingebaute Boot-Oberfläche ist ...
Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System
Aus Hardwaregründen kann es vorkommen, dass die M...
Einführung in verschiedene Möglichkeiten zur Einführung von CSS in HTML
Inhaltsverzeichnis 1. CSS-Stile direkt in HTML-Ta...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
Eine eingehende Analyse von MySQL erläutert die Verwendung und die Ergebnisse
Vorwort Bei unserer täglichen Arbeit führen wir m...
Vue implementiert eine kleine Wettervorhersageanwendung
Dies ist eine Website, die ich nachgeahmt habe, a...
Vue implementiert ein Suchfeld mit einer Lupe
In diesem Artikel erfahren Sie, wie Sie mit Vue e...
Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
In diesem Artikel wird ein JS-Spezialeffekt vorge...
XHTML verwendet einige veraltete Elemente in HTML nicht mehr
Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...