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

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

String-Extraktion ohne Trennzeichen Fragenanforde...

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Es gibt drei Möglichkeiten, ein Springboot-Projek...

Interpretation des Moduls zum Lastenausgleich mit nginx

Inhaltsverzeichnis Zwei Module zur Verwendung von...

So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt

Einführung Beginnen wir mit unserem Inhalt. Ich g...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren

Egal, ob Sie zu Hause auf dem Sofa oder draußen i...

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

In diesem Artikel wird der spezifische Code von J...

So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

Als ich mir selbst die Webentwicklung beibrachte,...

Führt das Laden von CSS zu einer Blockierung?

Vielleicht weiß jeder, dass die JS-Ausführung die...

Zusammenfassung der Implementierungsmethoden und Punkte der H5-Wakeup-APP

Inhaltsverzeichnis Vorwort Zur APP-Methode spring...

Fehler beim reduzierten Tabellenzeilenelement

Nehmen wir ein Beispiel: Der Code ist sehr einfach...

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...

JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten

Inhaltsverzeichnis Definition Grammatik Beispiele...