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
CSS 3.0 Text Hover Jump Spezialeffekte-Code
Hier ist ein mit CSS 3.0 implementierter Textschw...
Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js
Nachfrage: Diese Nachfrage ist ein dringender Bed...
So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox
1. Einleitung Vagrant ist ein Tool zum Erstellen ...
Einführung in den CSS BEM-Benennungsstandard (empfohlen)
1 Was ist der BEM-Namensstandard Bem ist die Abkü...
Beispielcode mit SCSS in Uni-App
Aufgetroffene Fallstricke Ich habe den ganzen Nac...
Zusammenfassung der Dinge, auf die Sie in der Fußzeile einer Webseite achten sollten
Viele Links Sie haben zweifellos viele Sites wie d...
Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin
YSlow ist ein von Yahoo USA entwickeltes Plug-in ...
Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies
Bei jedem Besuch wird im Browser Cookie generiert...
Ein Beispiel für die Verwendung eines Lvs+Nginx-Clusters zum Erstellen einer Architektur mit hoher Parallelität
Inhaltsverzeichnis 1. Lvs-Einführung 2. Lvs-Lasta...
Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)
1. Installieren Sie die vsftpd-Komponente Install...
So fragen Sie den minimal verfügbaren ID-Wert in der MySQL-Tabelle ab
Als ich mir heute die Laborprojekte ansah, stieß ...
Installation und Deinstallation der dekomprimierten Version von MySQL 5.7 und Zusammenfassung häufiger Probleme
1. Installation 1. Herunterladen Gehen Sie zur of...
Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls
Ich habe node.js zum Erstellen des Servers gewähl...
Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an
Methode 1: Verwenden Sie zur Lösung die CSS-Überl...
Ist das Tag „li“ ein Blockelement?
Warum kann es die Höhe festlegen, aber im Gegensat...