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

Beispielanalyse der MySQL-Datumsverarbeitungsfunktion

JavaScript zum Erzielen eines einfachen Countdown-Effekts

Umsetzungsideen:

Codebeispiel:

Seiteneffekt:

Beispielanalyse der MySQL-Datumsverarbeitungsfunktion

Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke

Zusammenfassung der zwölf Methoden der Vue-Wertübertragung

Detaillierte Erklärung der CSS-Float-Eigenschaft

Tipps zur Verwendung kleiner HTML-Tags

Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.

Sie müssen wahrscheinlich keine Switch-Anweisungen in JavaScript verwenden

So ändern Sie die Standardcodierung von MySQL in Linux

Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

Detaillierte Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung

Artikel empfehlen

Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Docker startet im Status „Beendet“

Verwendung des Linux-SFTP-Befehls

So erreichen Sie die maximale Anzahl von Verbindungen in MySQL

Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann

Vollständiger Prozessdatensatz zur Fehlerbehebung bei MySQL DeadLock

So richten Sie die Swap-Partition SWAP in Linux 7.7 ein

Ubuntu MySQL-Version auf 5.7 aktualisiert

So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image

Detailliertes Tutorial zum PyCharm- und SSH-Remote-Access-Server-Docker

Beispiel für eine MySQL-DML-Sprachoperation

MySQL-Datenbank erstellen, Benutzer hinzufügen, Benutzerautorisierung, praktische Methode

Detaillierte Erklärung gängiger Befehle im Docker-Repository

Beheben Sie das Problem, dass sich die Ränder des Suchfelds und der Suchschaltfläche nicht überlappen können

Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen