Countdown-Effekt mit Javascript implementieren
|
Verwenden Sie Javascript, um den Countdown-Effekt zu erzielen. Zu Ihrer Information lautet der spezifische Inhalt wie folgt Ich lerne immer noch das große Frontend. Bitte verzeihen Sie mir, wenn der Code Unregelmäßigkeiten oder falsche Ideen enthält. Vielen Dank für Ihren Rat. Auf manchen Websites von Einkaufszentren sehen wir oft einen Countdown-Bereich auf der Website oder in der App, der die Benutzer daran erinnert, wie viel Zeit noch verbleibt, bevor etwas passiert. Lassen Sie uns diesen mithilfe von Code implementieren. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
div {
Rand: 300px;
Rand: 1px durchgehend rosa;
}
Spanne {
Anzeige: Inline-Block;
Breite: 40px;
Höhe: 40px;
Hintergrundfarbe: blau;
Schriftgröße: 20px;
Farbe: #fff;
Textausrichtung: zentriert;
Zeilenhöhe: 40px;
}
</Stil>
</Kopf>
<Text>
<div>
<span class="Stunde">1</span>
<span class="Minute">2</span>
<span class="zweite">3</span>
</div>
<Skript>
var Stunden = document.querySelector('.hour')
var min = document.querySelector('.minute')
var sce = document.querySelector('.second')
var inputTime=+neues Datum('2021-2-8 16:40:00')
//countDown()//Zuerst aufrufen, um Leerzeichen beim ersten Aktualisieren zu vermeiden//Timer starten. Dies ist der Timer setInterval(countDown,1), der nach einer Wartezeit von 1000 ms gestartet wird.
Funktion CountDown() {
var nowTime = +new Date(); // Gibt die Gesamtzahl der Millisekunden der aktuellen Zeit zurück var times = (inputTime - nowTime) / 1000; // times ist die Gesamtzahl der verbleibenden Sekunden var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
hours.innerHTML = h; // Verbleibende Stunden an die Stunden-Blackbox weitergeben var m = parseInt(times / 60 % 60); // Minuten m = m < 10 ? '0' + m : m;
min.innerHTML = m;
var s = parseInt(times % 60); // Aktuelle Sekunde s = s < 10 ? '0' + s : s;
sce.innerHTML = s;
}
</Skript>
</body>
</html>Demonstrationseffekt:
Die Zeit zählt Sekunde für Sekunde herunter Code-Erklärung: Hier habe ich drei Inline-Span-Elemente in das Block-Div-Element eingefügt. Da die Breite und Höhe von Inline-Elementen nicht geändert werden kann, werden sie alle durch Inline-Blockelemente ersetzt. Da der Countdown hier in drei Spannfeldern geändert werden muss, die jeweils den Stunden, Minuten und Sekunden entsprechen, werden die Ereignisse dieser drei Spannen abgerufen. Verwenden Sie dann die Variable „inputTime“, um unsere Zielzeit zu erhalten. Erstellen Sie dann eine Funktion mit dem Namen countDown. Die Variable nowTime wird in der Funktion verwendet um die aktuelle Uhrzeit zu erhalten. Da die empfangene Zeit in Millisekunden angegeben wird, wird eine Variable times verwendet, um die Zeitdifferenz zwischen der Zielzeit und der aktuellen Zeit zu empfangen und dann durch 1000 zu teilen. Da 1 s = 1000 ms ist, werden hier die verbleibenden Sekunden ermittelt. Verwenden Sie h, um die verbleibenden Stunden darzustellen: ein Tag = 24 Stunden, eine Stunde = 60 Minuten und 1 Minute = 60 Sekunden. Daher verwenden wir hier die Gesamtzahl der Sekunden/60/60 %24, um die verbleibenden Stunden zu erhalten. Um den Stil besser aussehen zu lassen, setzen wir die angezeigten Dezimalstellen mithilfe des ternären Operators auf zwei Ziffern: Ist die Stunde kleiner als 10? Wenn der Wert kleiner als 10 ist, fügen Sie davor eine „0“ hinzu; wenn der Wert größer als 10 ist, geben Sie einfach die Zahl zurück. Verwenden Sie „h“ zum Empfangen und geben Sie „h“ in das Stundenfeld ein. Dasselbe Prinzip gilt für die Minuten und Sekunden weiter unten. 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:
|
<<: MySQL PXC erstellt einen neuen Knoten mit ausschließlich IST-Übertragung (empfohlen)
>>: Verwenden von Docker-Ausführungsoptionen zum Überschreiben von Einstellungen im Dockerfile
Artikel empfehlen
Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays
Inhaltsverzeichnis 1. Array.at() 2. Array.copyWit...
Details zur Reihenfolge, in der MySQL my.cnf liest
Inhaltsverzeichnis Die Reihenfolge, in der MySQL ...
Vergleich der Leistung von int, char und varchar in MySQL
Im Internet kursieren viele scheinbar wahre „Gerü...
HTML/CSS (der erste Leitfaden, den Anfänger unbedingt lesen sollten)
1. Die Bedeutung von Webstandards verstehen - War...
Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK
1. OpenJDK anzeigen rpm -qa|grep jdk 2. Löschen S...
Allgemeines Startskriptbeispiel für ein Linux-Java-Programm
Allerdings ist die Häufigkeit des Shell-Starts se...
Analyse des Implementierungsprozesses der Docker-Intranet-Penetration-FRP-Bereitstellung
1. Erstellen Sie ein Konfigurationsdateiverzeichn...
MySQL 5.5.56-Version (Installation von Binärpaketen) benutzerdefinierter Installationspfad-Schrittdatensatz
Installationspfad: /application/mysql-5.5.56 1. V...
Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro
Inhaltsverzeichnis 1. Konfigurieren Sie das Vue-F...
In Linux gibt es keinen Make-Befehl (make: *** Kein Ziel angegeben und keine Makefile- oder Make-Befehlsinstallationsmethode gefunden)
Beachten! ! ! Diese Situation kann bei der Instal...
Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker
Docker: Zookeeper schnell installieren Ich habe Z...
So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image
Führen Sie zunächst eine einfache Docker-Installa...
Der Prozess der Installation und Konfiguration von Nginx in Win10
1. Einleitung Nginx ist ein kostenloser, quelloff...
Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration
Externer Zugriff Ports nach dem Zufallsprinzip zu...
HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche
HTML Quelltext: <a onclick="goMessage();&...