JavaScript zum Erzielen eines einfachen Countdown-Effekts

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

Artikel empfehlen

Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten

1. Einige Tipps zu mit class in react deklarierte...

Analyse von MySQL-Parallelitätsproblemen und -Lösungen

Inhaltsverzeichnis 1. Hintergrund 2. Langsame Abf...

Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

Im vorherigen Artikel haben wir die MySQL-Optimie...

Verwenden Sie ein Shell-Skript, um die Python3.8-Umgebung in CentOS7 zu installieren (empfohlen)

Ausführung mit nur einem Klick Um Python 3.8 in e...

MySQL-Abfrage doppelter Daten (löschen Sie doppelte Daten und behalten Sie die Daten mit der kleinsten ID als einzige Daten)

Entwicklungshintergrund: Ich arbeite derzeit an e...

Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren

1. Schauen Sie sich zunächst die Anforderungskonf...

HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung

1. Anzeigeeffekt: 2. HTML-Struktur <div Klasse...

Schritte zur VSCode-Konfiguration mit der Git-Methode

Git ist in vscode integriert und viele Vorgänge k...

Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare

Genau wie bei Code können Sie den Tabellen und Sp...

Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?

1. Einleitung In diesem Artikel wird hauptsächlic...

Der Unterschied zwischen Anzeige, Sichtbarkeit, Deckkraft, RGBA und Z-Index: -1 in CSS

Wir müssen oft die versteckten, transparenten und...

VMware vSAN - Zusammenfassung der ersten Schritte

1. Hintergrund 1. Stellen Sie kurz den Shared Sto...

Implementierungsprozess des Nginx-Hochverfügbarkeitsclusters

Dieser Artikel stellt hauptsächlich den Implement...

Beispielcode für Datenbanksicherung in einer Docker-Umgebung (PostgreSQL, MySQL)

Inhaltsverzeichnis Posgresql-Sicherung/Wiederhers...

Analyse mehrerer Gründe, warum Iframe weniger verwendet werden sollte

Die folgende Grafik zeigt, wie zeitaufwändig es is...