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:

Implementieren Sie die Countdown-Funktion nach dem Senden des SMS-Bestätigungscodes basierend auf JS (ignorieren Sie die Seitenaktualisierung und führen Sie die Countdown-Funktion nicht aus, wenn die Seite geschlossen ist).

<<: So installieren Sie Phabricator mit Docker

>>: MySQL PXC erstellt einen neuen Knoten mit ausschließlich IST-Übertragung (empfohlen)

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Detaillierte Erklärung der Lösung für CSS-Opazität untergeordneter Elemente, um die Transparenz übergeordneter Elemente zu übernehmen

Beim Schreiben der Projektseite stieß ich auf das...

JavaScript-Countdown zum Schließen von Anzeigen

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Zusammenfassung der Tipps zur Verwendung von coalesce() in MySQL

Lernprogramm für HTML-Webseitenlisten-Tags

Schritte zum Übertragen des neuen Kernels auf das Linux-System

Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js

So aktivieren Sie TLS- und CA-Authentifizierung in Docker

element-ui Markieren Sie die Koordinatenpunkte nach dem Hochladen des Bildes

Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen

So verwenden Sie ein Domestic Image Warehouse für Docker

Artikel empfehlen

Detaillierte Einführung in das benutzerdefinierte Docker-Netzwerk

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Komponentendesignspezifikationen für die Entwicklung von WeChat-Miniprogrammen

Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse

Ausführliche Diskussion über die automatische Inkrementierung von Primärschlüsseln in MySQL

JS Canvas-Oberfläche und Animationseffekte

Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Detaillierte Erklärung der Lösung für CSS-Opazität untergeordneter Elemente, um die Transparenz übergeordneter Elemente zu übernehmen

Detaillierter Ablauf des Zabbix-Überwachungsprozesses und des Port-Through-Agenten

Der Tabellenkörper in HTML kann nach oben und unten sowie nach links und rechts verschoben werden.

SQL-Implementierung von LeetCode (181. Angestellte verdienen mehr als Manager)

Lösen Sie das MySQL 5.7.9 Version sql_mode=only_full_group_by Problem

Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte

Definition und Funktion des zoom:1-Attributs in CSS