JavaScript-Countdown zum Schließen von Anzeigen
|
Verwenden von Javascript zum Implementieren eines Countdowns zum Schließen einer Anzeige 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. In vielen Apps und auf Webseiten können wir solche Anzeigen sehen: Nach dem Aufrufen einer Website wird eine Anzeige eingeblendet, die dann einen Countdown hat. Wenn der Countdown abgelaufen ist, verschwindet die Anzeige. Lassen Sie uns Code verwenden, um diese Funktion zu implementieren. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
.djs{
Breite: 30px;
Höhe: 30px;
Position: absolut;
links: 700px;
Farbe: weiß;
Hintergrundfarbe: dunkelrot;
}
.Ende{
Anzeige: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="djs"></div>
<img class="ad" src="../images/1.png" alt="">
<div class="end">Die Anzeige ist beendet</div>
<Skript>
//Anzeige in 5 Sekunden schließen var ad=document.querySelector('.ad')
var div = document.querySelector('.djs')
var end = document.querySelector('.end')
var t=5
Spaß()
setzeIntervall(Spaß,1000)
Funktion Spaß() {
div.innerHTML=t
wenn (t==0){
Anzeige.Stil.Anzeige = "keine"
div.style.display='keine'
Ende.Stil.Anzeige='Block'
}
T--
}
</Skript>
</body>
</html>Demonstrationseffekt:
Der Countdown befindet sich in der oberen rechten Ecke.
Code-Erklärung: Hier erstellen wir zuerst eine Funktion und setzen eine globale Variable t, dann ist t die Countdown-Zeit. In der Countdown-Funktion ändern wir den im div angezeigten Text in unseren Countdown t und bestimmen dann, ob t gleich 0 ist. Wenn es gleich 0 ist, endet der Countdown, das Bild und das Countdown-Feld werden ausgeblendet und ein Feld angezeigt, das angibt, dass die Anzeige beendet ist. 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:
|
<<: So installieren Sie Phabricator mit Docker
>>: MySQL PXC erstellt einen neuen Knoten mit ausschließlich IST-Übertragung (empfohlen)
Artikel empfehlen
Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP
Inhaltsverzeichnis Einführung in FTP, FTPS und SF...
VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)
Das Computersystem ist: win7 Dieser Artikel basie...
Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
Inhaltsverzeichnis Vorwort 1. Übersicht 2. Lese- ...
TypeScript-Aufzählungstypen im Detail erklären
Inhaltsverzeichnis 1. Digitale Aufzählung 2. Zeic...
MySQL implementiert eine Lösung ähnlich der Oracle-Sequenz
MySQL implementiert Oracle-ähnliche Sequenzen Ora...
MySQL-Index für Anfänger
Vorwort Da die wichtigste Datenstruktur im MySQL-...
Optimierte Aufzeichnung der Verwendung von IN-Datenvolumen in Mysql
Die MySQL-Versionsnummer ist 5.7.28. Tabelle A ha...
Dockers Mechanismus zur Integritätserkennung
Für Container ist die einfachste Integritätsprüfu...
So führen Sie Linux-Shell-Befehle in Docker aus
Um einen Shell-Befehl in Docker auszuführen, müss...
Eine einfache Möglichkeit zum Erstellen einer Docker-Umgebung
Lassen Sie uns zunächst verstehen, was Docker ist...
MySQL deaktiviert die Überprüfung der Kennwortstärke
Informationen zur Überprüfung der Kennwortstärke:...
So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll
Inhaltsverzeichnis Vorwort Ideenstartgeschwindigk...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...
Ein Beispiel für die Berechnungsfunktion calc in CSS im Website-Layout
calc ist eine Funktion in CSS, die zum Berechnen ...
Vue realisiert die Funktion eines Bucheinkaufswagens
In diesem Artikelbeispiel wird der spezifische Co...