JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen

JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen

Um die Fähigkeit zum Schreiben von nativem JavaScript-Code zu verbessern und die Verwendung von setTimeout() zu konsolidieren, wurde eine Countdown-Demo erstellt. Countdown ist eine gängige kleine Funktion auf heutigen Websites. Wenn es Ihnen gefällt, können Sie es behalten und als praktisches kleines Skript für den täglichen Gebrauch behandeln.

Umsetzungsideen

1. Ermitteln Sie zuerst den Stundenwert, subtrahieren Sie 1 vom Stundenwert und starten Sie den Countdown. Minuten 59 Sekunden 59
2. Die Einerstelle der Sekunde verringert sich von 9 aus. Wenn die Einerstelle der Sekunde kleiner als 0 ist, verringert sich die Zehnerstelle der Sekunde um 1.
3. Wenn die Zehnerstelle der Sekunde kleiner als 0 ist, wird die Einerstelle der Minute um 1 reduziert.
4. Wenn die Einerstelle der Minute kleiner als 0 ist, wird die Zehnerstelle der Minute um 1 reduziert.
5. Wenn die Zehnerstelle der Minute kleiner als 0 ist, subtrahieren Sie 1 von der Stunde.
6. Wenn die Stundenzahl kleiner als 0 ist, stoppt der Timer und alle Stunden werden auf 0 gesetzt.

Implementierungscode

html

<p>Countdown:</p>
<span id="Stunde">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="zweitesBit">0</span>

CSS

Spanne{
 Anzeige: Inline-Block;
 Breite: 20px;
 Höhe: 20px;
 Hintergrundfarbe: #000000;
 Farbe: #ffffff;
 Textausrichtung: zentriert;
 }

JavaScript

 Funktion Zeit(){
 /*Stunde*/
 var hourTxt = document.getElementById("Stunde");
 var Stunde = parseInt(document.getElementById("Stunde").innerHTML);
 /*Minute*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*Zweite*/
 var secondTenTxt = document.getElementById("secondTen");
 var zweitesBitTxt = document.getElementById("zweitesBit");
 var zweiteZehn = parseInt(document.getElementById("zweiteZehn").innerHTML);
 var zweitesBit = parseInt(document.getElementById("zweitesBit").innerHTML);
 Funktion start(){
 Stunde--;
 hourTxt.innerHTML = Stunde;
 minuteZehn = 5;
 minuteZehnTxt.innerHTML = minuteZehn;
 minuteBit = 9;
 minuteBitTxt.innerHTML = minuteBit;
 zweiteZehn = 5;
 zweiterZehnTxt.innerHTML = zweiterZehn;
 zweitesBit = 9;
 zweitesBitTxt.innerHTML = zweitesBit;

 /*secondBit beginnt abzunehmen*/
 Funktion Sekunde(){
  zweitesBit--;
  zweitesBitTxt.innerHTML = zweitesBit;

  /*Zehn Sekunden später*/
  wenn(zweitesBit < 0){
  zweiteZehn--;
  zweiterZehnTxt.innerHTML = zweiterZehn;
  zweitesBit = 9;
  zweitesBitTxt.innerHTML = zweitesBit;
  /*Countdown fortsetzen*/
  setTimeout(Sekunde,1000);

  /*Eine Minute später*/
  wenn(zweiteZehn < 0){
   minuteBit--;
   minuteBitTxt.innerHTML = minuteBit;
   zweiteZehn = 5;
   zweiterZehnTxt.innerHTML = zweiterZehn;
   zweitesBit = 9;
   zweitesBitTxt.innerHTML = zweitesBit;

   /*Zehn Minuten später*/
   wenn(Minutenbit < 0){
   MinuteZehn--;
   minuteZehnTxt.innerHTML = minuteZehn;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }

   /*Nach einer Stunde*/
   if(minuteZehn < 0){
   Stunde--;
   hourTxt.innerHTML = Stunde;
   minuteZehn = 5;
   minuteZehnTxt.innerHTML = minuteZehn;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   zweiteZehn = 5;
   zweiterZehnTxt.innerHTML = zweiterZehn;
   zweitesBit = 9;
   zweitesBitTxt.innerHTML = zweitesBit;
   }

   /*Countdown endet*/
   wenn(Stunde < 0 ){
   Stunde = 0;
   hourTxt.innerHTML = Stunde;
   minuteZehn = 0;
   minuteZehnTxt.innerHTML = minuteZehn;
   minuteBit = 0;
   minuteBitTxt.innerHTML = minuteBit;
   zweiteZehn = 0;
   zweiterZehnTxt.innerHTML = zweiterZehn;
   zweitesBit = 0;
   zweitesBitTxt.innerHTML = zweitesBit;
   ClearTimeout (Sekunde);
   Zeitüberschreitung löschen (Start);
   }
  }
  }anders{
  setTimeout(Sekunde,1000);
  }
 }
 setTimeout(Sekunde,1000);

 }
 setzeTimeout(start,1000);
}

Ausführungsseite

Seite beenden

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:
  • Was sind die grundlegenden Verwendungszwecke von JavaScript setTimeout()
  • JavaScript setInterval() vs setTimeout() Timer
  • Verwenden Sie einfach settimeout, um den Betriebsmechanismus von Javascript anzuzeigen
  • So verstehen Sie den JS-Betriebsmechanismus durch setTimeout
  • Schauen Sie sich den Ausführungsprozess der JS-Funktion von setTimeout an
  • js lernen, setTimeout zu verwenden, um Round-Robin-Animation zu implementieren
  • Analyse der JavaScript-Timer-Nutzung [setTimeout und clearTimeout]
  • Detaillierte Erklärung des this-Pointing-Problems der Timer setInterval und setTImeout in JS
  • Dinge über setTimeout in JavaScript
  • Vier Lösungen für die Verwendung von setTimeout in JS for-Schleifen

<<:  Detaillierte Erläuterung zur Lösung des Problems des domänenübergreifenden Zugriffs auf statische Nginx/Apache-Ressourcen

>>:  Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers

Artikel empfehlen

Hinweise zu den Formularkomponenten des Elements

Elementform und Codeanzeige Weitere Einzelheiten ...

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...

Verwendung und Prinzipien von Provide und Inject in Vue3

Vorwort: Beim Übergeben von Daten zwischen überge...

Zusammenfassung der Tipps zur CSS-Verwendung

Vor Kurzem habe ich mit der Aktualisierung meines ...

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

1. Berechnete Eigenschaften und Listener 1.1 Bere...

Dateifreigabe zwischen Ubuntu und Windows unter VMware

In diesem Artikel wird die Methode zum Teilen von...

Funktionsweise von SQL-SELECT-Datenbankabfragen

Obwohl wir keine professionellen DBAs sind, könne...

Detaillierte Erklärung zur Verwendung von Teleport in Vue3

Inhaltsverzeichnis Zweck des Teleports So funktio...

JS implementiert die Append-Funktion von jQuery

Inhaltsverzeichnis Zeig mir den Code Testen Sie d...

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle

1. Einleitung Durch Aktivieren des Slow Query Log...

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

1. MHA Durch die Überwachung des Masterknotens ka...