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:

JavaScript zum Erzielen eines Digitaluhreffekts
Vue.js implementiert ein Beispiel für eine Digitaluhrfunktion mit Datum und Woche
JS+CSS, um einen scrollenden Digitaluhreffekt zu erzielen
js realisiert einen einfachen Digitaluhreffekt
Verwenden Sie JS, um den Countdown-Digitaluhreffekt anzuzeigen
Beispiel einer JavaScript-Digitaluhr zum Erzielen eines Scroll-Effekts
JS realisiert den Countdown-Digitaluhr-Effekt [mit Beispielcode]
Von JS implementierter Digitaluhreffekt für den Countdown der Webseite
Freigabe eines Beispiels für eine JavaScript-Digitaluhr
HTML5 Canvas js (Digitaluhr) Beispielcode

<<: Verwenden Sie den Befehl ip netns in Linux, um den Netzwerkport zu isolieren und die IP-Adresse zu konfigurieren

>>: Tutorial zur Installation und Konfiguration der Version MySQL 5.7.23