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
Das ganz links stehende Übereinstimmungsprinzip des MySQL-Datenbankindex
Inhaltsverzeichnis 1. Gemeinsame Indexbeschreibun...
Beispieltest MySQL-Enumerationstyp
Bei der Entwicklung eines Projekts stößt man häuf...
Lösen Sie das Spleißproblem beim Löschen von Bedingungen in myBatis
Ich habe heute gerade Mybatis gelernt und einige ...
MySQL 5.7.20 Green Edition Installation Detailliertes grafisches Tutorial
Lassen Sie uns zunächst verstehen, was MySQL ist....
MySQL-Datenbank implementiert MMM-Hochverfügbarkeitsclusterarchitektur
Konzept MMM (Master-Master-Replikationsmanager fü...
Ubuntu 18.04 installiert pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib
1. Es gibt derzeit viele Tools zur Python-Version...
Beispielanalyse der Verwendung gemeinsam genutzter und exklusiver Sperren in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22
Installation und Konfiguration von MySQL8.0.22 (s...
So leiten Sie über den Nginx-Lastausgleich zu https um
Kopieren Sie das Zertifikat und den Schlüssel im ...
Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js
So schreiben Sie ein Vue-foreach-Array und durchl...
Auszeichnungssprache - Stylesheets drucken
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Detaillierte Erklärung des Nginx-Prozessplanungsproblems
Nginx verwendet eine feste Anzahl von Multiprozes...
Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)
Ich habe schon einmal einen solchen Artikel gesch...
Durchführung der lokalen Migration von Docker-Images
Ich habe vor Kurzem Docker gelernt und stoße dabe...
Wenden Sie „Provide“ und „Inject“ an, um die Vue-Seitenmethode zu aktualisieren
Inhaltsverzeichnis Methode 1: Rufen Sie die Funkt...