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

Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben

01. Unendlichkeit Schriftart herunterladen 02. Ban...

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

Manchmal müssen wir steuern, ob HTML-Elemente auf ...

Wie erreicht MySQL die Parallelität mehrerer Versionen?

Inhaltsverzeichnis MySQL-Mehrversionen-Parallelit...

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

einführen Ein Diagramm ist eine grafische Darstel...

Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen

Im Laufe der Zeit habe ich festgestellt, dass vie...

So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense

Inhaltsverzeichnis Vorwort Komponenten erstellen ...

Schritte zur Methode „Mysql-Abfragedatenbankkapazität“

Abfrage der Gesamtgröße aller Datenbanken So geht...

So leiten Sie eine PC-Adresse in Vue an eine Mobiladresse um

Anforderungen: Die PC-Seite und die mobile Seite ...

Tutorial zur Installation von MySQL 5.6 auf CentOS 6.5

1. Laden Sie das RPM-Paket für Linux herunter htt...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Anleitung zur Verwendung von env in vue cli

Inhaltsverzeichnis Vorwort Einführung-Offiziell B...