JavaScript implementiert Countdown auf Front-End-Webseite

Verwenden Sie natives JavaScript, um den Countdown einfach zu implementieren. Zu Ihrer Information lautet der spezifische Inhalt wie folgt

Wirkung

Code

// Ein hervorgehobener Block
<!DOCTYPE html>
<html>

<Kopf>
 <meta charset="utf-8">
 <Titel></Titel>

 <!-- CSS-Stil -->
 <style type="text/css">
  * {
   Rand: 0;
   Polsterung: 0;
  }

  .onsel {
   Höhe: 400px;
   Breite: 200px;
   Rand: 1px durchgezogen #F2F2F2;
   Rand: 10px;
   Kastenschatten: 1px 2px 4px rgba(0, 0, 0, .2);
  }

  .Kasten {
   /* Anzeige: keine; */
   schweben: links;
   Rand: 328px 34px 0;
  }

  .box div {
   Position: relativ;
   Anzeige: Inline-Block;
   Breite: 40px;
   Höhe: 40px;
   Hintergrundfarbe: #333;
   Farbe: #fff;
   Schriftgröße: 20px;
   Textausrichtung: zentriert;
   Zeilenhöhe: 40px;
   Kastenschatten: 1px 2px 4px rgba(0, 0, 0, .4);
  }
 </Stil>

</Kopf>

<Text>
 <!-- Anforderung: Ein Produkt wird in der Zukunft an einem Tag im Angebot sein und mit js: Stunden: Minuten: Sekunden wird ein Countdown-Effekt erstellt -->
 <div Klasse="onselling">
  <div Klasse="Box">
   <div class="Stunde">00</div>
   <div class="Minuten">00</div>
   <div class="Sekunden">00</div>
  </div>
 </div>
</body>

</html>
<Skript>
 fenster.onload = Funktion () {
  let Stunde = document.querySelector('.Stunde')
  let Minuten = document.querySelector('.Minuten')
  let Sekunden = document.querySelector('.Sekunden')

  // Der Countdown-Zeitstempel verwendet +, um das Zeitobjekt in einen Zeitstempel umzuwandeln, was Date.now() entspricht
  let wantTime = +neues Datum('2021-3-17 18:00:00')
  Zählzeit()

  let timer = setzeInterval(() => {
   Zählzeit()
  }, 1000)

  Funktion Zählzeit() {
   let aktuelleZeit = +neues Datum()
   wenn (gewünschteZeit >= aktuelleZeit) {
    let times = (wantTime - currentTime) / 1000 // Gesamtsekunden timestamp / 1000 = Sekunden let remainDay = parseInt(times / 60 / 60 / 24) // Der Rest sind die verbleibenden Tage console.log(remainDay);
    wenn (restlicherTag === 0) {
     wenn(mal < 1) {
     // Der Countdown ist vorbei // Hier die Operation auslösen}
     // Wenn die Anzahl der Tage kleiner als ein Tag ist, starte die Zeitmessung mit setTime(times)
    }
   } anders {
    Stunde.innerHTML = '00'
    Minuten.innerHTML = '00'
    Sekunden.innerHTML = '00'
   }
  }


  Funktion setzeZeit(Zeit) {

   // Grobe Version let s = parseInt(time % 60)
   s = s < 10 ? '0' + s : s
   sei m = parseInt(Zeit / 60 % 60)
   m = m < 10 ? '0' + m : m
   sei h = parseInt(Zeit / 60 / 60 % 24)
   h = h < 10 ? '0' + h : h
   Stunde.innerHTML = h
   Minuten.innerHTML = m
   Sekunden.innerHTML = Sekunden

  }

 }
</Skript>

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:

Detaillierte Erklärung der For-Schleife und der doppelten For-Schleife in JavaScript
JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern
Fünf Möglichkeiten zum Durchlaufen von JavaScript-Arrays
Tiefgreifendes Verständnis des Javascript-Klassenarrays
JavaScript implementiert das Protokollbeispiel, in dem der Benutzer das Kontrollkästchen aktivieren muss

<<: Detaillierte Erklärung der Softwarekonfiguration mit Docker-Compose unter Linux

>>: Detaillierte Erklärung zum Ersetzen in ein Beispiel in MySQL