JavaScript zum Erzielen eines einfachen Countdown-Effekts

In diesem Artikelbeispiel wird der spezifische Code von Javascript zur Erzielung des Countdown-Effekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt

Umsetzungsideen:

1. Erstellen Sie Beschriftungselemente für Tage, Stunden, Minuten und Sekunden auf der Seite und definieren Sie die Stile
2. js erhält die Elementobjekte von Tagen, Stunden, Minuten und Sekunden, sodass ihnen später Werte zugewiesen werden können - - - verbleibende Zeit
3. Definieren Sie eine Funktion zum Berechnen der Zeitdifferenz zwischen der aktuellen Zeit und der eingestellten Zeit, berechnen Sie die verbleibenden Tage, Stunden, Minuten und Sekunden und weisen Sie sie dem entsprechenden Elementinhalt zu
4. Verwenden Sie die Funktion setInterval(), um die Zeitdifferenzfunktion so einzustellen, dass sie alle 1 Sekunde ausgeführt wird.
5. Beachten Sie, dass Sie vor dem Aufrufen der Funktion setInterval () zuerst die Zeitdifferenzfunktion aufrufen sollten. Andernfalls wird beim Aktualisieren der Seite der im Tag geschriebene Originalinhalt angezeigt und anschließend die berechnete Zeitdifferenz.

Codebeispiel:

<!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>Countdown-Effekt</title>
    <Stil>
        div {
            Rand: 200px;
        }
        
        Spanne {
            Anzeige: Block;
            schweben: links;
            Breite: 50px;
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Textausrichtung: zentriert;
            Rand: 5px;
            Farbe: #fff;
            Hintergrundfarbe: rgba(0, 0, 0, .8);
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Zeit">
        <span class="Tag">0</span>
        <span>Tag</span>
        <span class="Stunde">1</span>
        <span>Stunden</span>
        <span class="Minute">2</span>
        <span> Punkte</span>
        <span class="zweite">3</span>
        <span>Sekunden</span>
    </div>
    <Skript>
        var Tag = document.querySelector('.day');
        var Stunde = document.querySelector('.Stunde');
        var minute = document.querySelector('.minute');
        var Sekunde = document.querySelector('.Sekunde');

        var setTime = +new Date('2021-10-1 09:00:00');
        Countdown();
        Intervall festlegen(CountDown, 1000);

        console.log(+neues Datum());

        Funktion CountDown() {
            var jetzt = +neues Datum();
            var times = (setTime – jetzt) / 1000;
            var d = parseInt(mal / 60 / 60 / 24); //Tag d = d < 10 ? '0' + d : d;
            day.innerHTML = d; //Die verbleibenden Tage in die Tagesbox eingeben var h = parseInt(times / 60 / 60 % 24); //Wenn h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //Die verbleibenden Stunden in das Stundenfeld eingeben var m = parseInt(times / 60 % 60); //Minuten m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; //den Rest in die Punktebox aufteilen var s = parseInt(times % 60); //Sekunden s = s < 10 ? '0' + s : s;
            second.innerHTML = s; //Geben Sie die verbleibenden Sekunden in das Sekundenfeld ein}
    </Skript>
</body>

</html>

Hinweis: Wenn Sie die Funktion setInterval aufrufen, schreiben Sie einfach den Funktionsnamen. Schreiben Sie keine Parameter in die Funktion. Wenn Sie Parameter schreiben, wird die Funktion möglicherweise nicht in einer Schleife ausgeführt.
Beispiel: setInterval(countDown, 1000);
Habe versucht, setInterval(countDown(+new Date('2021-10-1 09:00:00')), 1000); zu schreiben.
Funktion CountDown(Zeit festlegen) {,,,}
Nach dem Schreiben verliert setInterval die Wirkung der Schleifenausführungsfunktion und kann keinen Countdown-Effekt erzeugen. Es wird sich nur einmal bei jeder Aktualisierung der Seite ändern.

Seiteneffekt:

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-Countdown-Implementierungscode (Stunden, Minuten, Sekunden)
JS-Countdown (Tage, Stunden, Minuten, Sekunden)
Einfacher und leicht zu verwendender Countdown-JS-Code
js-Code zur Realisierung des 60-Sekunden-Countdowns beim Klicken auf die Schaltfläche
2 einfache JS-Countdown-Methoden
Beispiel für die Implementierung einer einfachen Countdown-Funktion mit nativem JS
js Countdown-Sprungbeispiel nach ein paar Sekunden
js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
Javascript implementiert den Countdown für Produkt-Blitzverkäufe (Zeit wird mit der Serverzeit synchronisiert)

<<: So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden

>>: Die Vor- und Nachteile von Nginx und LVS und ihre geeignete Nutzungsumgebung

MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse

JavaScript zum Erzielen eines einfachen Countdown-Effekts

Umsetzungsideen:

Codebeispiel:

Seiteneffekt:

MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

Einführung in general_log-Protokollwissenspunkte in MySQL

TCP-Socket-SYN-Warteschlange und Accept-Warteschlangen-Unterschiedsanalyse

uni-app implementiert NFC-Lesefunktion

Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)

Detaillierte Erklärung, wie Sie mit CSS einige Pixel Leerraum unter einem Bild freigeben können

Einführung in MySQL-Rollenfunktionen

Detaillierte Erläuterung der Transaktionsisolationsebenen in den MySql-Studiennotizen

Vue implementiert einen Scrollbar-Stil

Artikel empfehlen

Beispiele für die Implementierung und Verwendung von geplanten MySQL-Aufgaben

Schritte zur Installation von GRUB auf einem Linux-Server

Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

So aktualisieren Sie den Kernel in Deepin Linux manuell

Perfekte Lösung für keine rc.local-Datei in Linux

Tutorial zur Installation von Elasticsearch 7.6.2 in Docker

Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden

Wird der Index durch MySQL ungültig?

Canvas zeichnet Rubbellos-Effekt

Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

So stellen Sie ein SpringBoot-Projekt mit Docker bereit

Dreißig HTML-Codierungsrichtlinien für Anfänger

Detaillierte Erläuterung von drei Beziehungsbeispielen für MySQL-Fremdschlüssel

So fügen Sie CentOS7 systemd benutzerdefinierte Systemdienste hinzu

So installieren Sie das Pip-Paket unter Linux