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
So deinstallieren Sie MySQL sauber (getestet und effektiv)
Wie deinstalliere ich Mysql vollständig? Befolgen...
Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)
Dieser Hinweis ist ein Installationstutorial. Er ...
XHTML-Tutorial: XHTML-Grundlagen für Anfänger
<br />Der Inhalt dieser Site ist Original. B...
Reine clientseitige und rein serverseitige Implementierungslösungen für die Konvertierung von HTML in PDF
brauchen Nachdem der Benutzer das Formular ausgef...
Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode
Einmal haben wir über das Würfelspiel gesprochen....
Spezifische Verwendung von Docker Anonymous Mount und Named Mount
Inhaltsverzeichnis Datenvolumen Anonyme und benan...
So ändern Sie die Zeit in der virtuellen CentOS-Maschine
Das obere Bild zeigt die Systemzeit und das unter...
iFrame-Mehrschichtverschachtelung, unbegrenzte Verschachtelung, hochadaptive Lösung
Es gibt drei Seiten A, B und C. Seite A enthält Se...
Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe
Gleichhohes Layout Bezieht sich auf das Layout vo...
Analyse des Implementierungsprozesses der Docker-Intranet-Penetration-FRP-Bereitstellung
1. Erstellen Sie ein Konfigurationsdateiverzeichn...
Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden
Das Layout des Textes unterliegt je nach Sprache ...
Lösen Sie das Problem des schwarzen Bildschirms, nachdem VMware das Linux-System installiert und gestartet hat
1. Installationsumgebung 1. HUAWEI Mate X CPU i5 ...
Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen
Im vorherigen Artikel wurde vorgestellt, wie Vue ...
Border-Radius IE8-kompatible Verarbeitungsmethode
Laut canisue (http://caniuse.com/#search=border-r...
Einführung in die MySQL-Entsperr- und Sperrtabelle
MySQL Lock-Übersicht Im Vergleich zu anderen Date...