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

JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern

Was ich heute teilen möchte, ist die Verwendung v...

Was sind die Attribute des JSscript-Tags

Was sind die Attribute des JS-Skript-Tags: charse...

Zusammenfassung zweier Methoden zum Implementieren der Vue-Druckfunktion

Methode 1: Installieren Sie das Plugin über npm 1...

HTML-Hyperlinks im Detail erklärt

Hyperlink Hyperlinks sind die am häufigsten verwen...

Linux-Systemaufrufe für Betriebsdateien

Inhaltsverzeichnis 1. Öffnen Sie die Datei Parame...

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner auss...

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

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

Drei BOM-Objekte in JavaScript

Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...

Grundlegendes zur CSS-Eigenschaft „transform-origin“

Vorwort Ich habe vor kurzem eine Feuerwerksanimat...

Drei Eigenschaften von Javascript-Objekten

Inhaltsverzeichnis 1. beschreibbar: beschreibbar ...

MySQL 8.X Installations-Tutorial unter Windows

Zuvor habe ich MySQL 5.7 verwendet, aber da MySQL...

MySQL erklärt das Prinzip und Beispiel zum Abrufen von Abfrageanweisungen

„explain“ wird verwendet, um Informationen zum Ab...

ElementUI-Komponente el-dropdown (Falle)

Auswählen und ändern: Klicken Sie, um den aktuell...

Detaillierte Erläuterung der Prinzippraxis des Bootstrap-Frameworks für CSS3-Medienabfragen mit responsivem Layout (empfohlen)

Detaillierte Beschreibung der Verwendung des Medi...

So kopieren Sie eine MySQL-Tabelle

Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...