JavaScript implementiert den Front-End-Countdown-Effekt

In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Front-End-Countdown-Effekts als Referenz freigegeben. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <Stil>
    div {
      Polsterung: 10px;
      Schriftgröße: 100px;
    }
    
    P {
      schweben: links;
      Breite: 300px;
      Höhe: 300px;
      Rand: 1px durchgezogen #000000;
      Farbe: #ffffff;
      Hintergrundfarbe: #333333;
      Textausrichtung: zentriert;
      Zeilenhöhe: 300px;
    }
  </Stil>
</Kopf>

<Text>
  <div>
    <p class="Stunde">1</p>
    <p class="Minute">2</p>
    <p Klasse="zweite">3</p>
  </div>
  <Skript>
    window.addEventListener('laden', Funktion() {
      //Elemente abrufenvar hour = document.querySelector('.hour'); //Blackbox für Stundenvar minute = document.querySelector('.minute'); //Blackbox für Minutenvar second = document.querySelector('.second'); //Blackbox für Sekundenvar inputTime = +new Date('2021-2-6 18:00:00'); //Gibt die Gesamtzahl der Millisekunden der Benutzereingabe zurück timecountDown(); //Rufen Sie diese Funktion einmal auf, um zu verhindern, dass die Seite beim ersten Aktualisieren leer ist//Starten Sie den TimersetInterval(countDown, 1000);

      Funktion CountDown() {
        var nowTime = +new Date(); //Gibt die Gesamtzahl der Millisekunden der aktuellen Zeit zurück var times = (inputTime - nowTime) / 1000; //tiems ist die Gesamtzahl der Millisekunden der verbleibenden Zeit var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; //Gebe der Stunden-Blackbox die verbleibenden Stunden an var m = parseInt(times / 60 % 60); //Minuten m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); //Aktuelle Sekunden s = s < 10 ? '0' + s : s;
        zweites.innerHTML = s;
      }
    })
</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:

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
Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
Javascript implementiert den Countdown für Produkt-Blitzverkäufe (Zeit wird mit der Serverzeit synchronisiert)

<<: Sehen Sie sich die häufig verwendeten SQL-Anweisungen in MySQL an (ausführliche Erklärung)

>>: SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails