Javascript-Countdown-Eingabeaufforderungsfeld
|
In diesem Artikelbeispiel wird der spezifische Javascript-Code zur Implementierung des Countdown-Eingabeaufforderungsfelds zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Vollbild-Eingabeaufforderungsfeld</title>
<Stil>
#Taste{
Breite: 150px;
Höhe: 50px;
Hintergrundfarbe: grüngelb;
}
.fullScreenDiv{/* Vollbild-Div */
Anzeige: keine;
Position: absolut;
links: 0px;
oben: 0px;
Breite: 100 %;
Höhe: 100%;
Hintergrundfarbe: rgba(0, 0, 0, 0,4);
}
.promptDiv{/* Eingabeaufforderungsfeld div */
Anzeige: keine;
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: versetzeX(-50%) versetzeY(-50%);
Breite: 30%;
Höhe: 30%;
Rahmenradius: 20px;
Hintergrundfarbe: weiß;
Textausrichtung: zentriert;
}
.schließen{
Höhe: 34px;
Zeilenhöhe: 34px;
Rand: 0px;
Textausrichtung: rechts;
Rahmen oben links – Radius: 20px;
Rahmen oben rechts – Radius: 20px;
Hintergrundfarbe: Kornblumenblau
}
.X{
Polsterung: 2px 6px;
Rand rechts: 8px;
Farbe: weiß;
Cursor: Zeiger;
}
.countDown{/*Countdown zum Schließen des Eingabefelds*/
Farbe: rot;
Schriftgröße: 28px;
}
</Stil>
<Skript>
fenster.onload = funktion(){
document.getElementById("Schaltfläche").addEventListener("Klick",function(){
document.getElementsByClassName("fullScreenDiv")[0].style.display="block";
document.getElementsByClassName("promptDiv")[0].style.display="block";
für(var i=5;i>=0;i--){
(Funktion(i){
setzeTimeout(Funktion(){
var j=Math.abs(i-5); //Wenn i 0 ist, dann ist der Timer 0 s und die Ausgabe ist abs(0-5)=5. Wenn i 5 ist, dann ist der Timer 5 s und die Ausgabe ist abs(i-5)=0.
wenn(j==0){
document.getElementsByClassName("fullScreenDiv")[0].style.display="keine";
document.getElementsByClassName("promptDiv")[0].style.display="keine";
}anders{
document.getElementsByClassName("countDown")[0].innerHTML=j;
}
},i*1000);//Jedes Intervall beträgt 1s
})(ich);
}
});
document.getElementsByClassName("X")[0].addEventListener("click",function(){
document.getElementsByClassName("fullScreenDiv")[0].style.display="keine";
document.getElementsByClassName("promptDiv")[0].style.display="keine";
});
}
</Skript>
</Kopf>
<Text>
<div>
<button id="button">Eingabeaufforderung im Vollbildmodus öffnen</button>
</div>
<div Klasse="fullScreenDiv">
<div Klasse="promptDiv">
<h4 class="schließen"><span class="X">X</span></h4>
<p>Ich bin eine Eingabeaufforderungsbox im Vollbildmodus. Ich bin eine Eingabeaufforderungsbox im Vollbildmodus. Ich bin eine Eingabeaufforderungsbox im Vollbildmodus.</p>
<p>Countdown ist vorbei</p>
<span class="countDown">5</span>
</div>
</div>
</body>
</html> 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:
|
<<: Detailliertes Tutorial zur Installation von JDK1.8 unter Linux
>>: MySQL InnoDB-Überwachung (Systemebene, Datenbankebene)
Artikel empfehlen
Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts
Welche Produkte möchten Sie erwähnen? Vor kurzem ...
Vue3 Vue-Ereignisbehandlungshandbuch
Inhaltsverzeichnis 1. Grundlegende Ereignisbehand...
Tutorial-Diagramm zur LAN-Netzwerkkonfiguration für virtuelle Maschinen von VMWare 15.X
Ich habe kürzlich an mehreren virtuellen Maschine...
So installieren Sie die Linux-Onlinesoftware gcc online
Befehle zur Linux-Onlineinstallation: yum install...
Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her
1. Laden Sie den MySQL-JDBC-Treiber (mysql-connec...
Beispiel zum Erstellen eines Datenbanknamens mit Sonderzeichen in MySQL
Vorwort In diesem Artikel wird erklärt, wie Sie i...
Implementierungsideen für die Synchronisierung von Docker-Registry-Images
Einleitung Bisher wurden unsere Docker-Images in ...
Detaillierte Erklärung zur Verwendung von HTML-Einbettungs-Tags und -Attributen
1. Grundlegende Grammatik Code kopieren Der Code ...
Zusammenfassung der grundlegenden Verwendung von JS-Arrays
Vorwort Arrays sind eine spezielle Art von Objekt...
10 Tipps zur Verbesserung der Website-Benutzerfreundlichkeit
Ob Unternehmenswebsite, persönlicher Blog, Shoppi...
CSS erzielt den „Bottom Absorption“-Effekt im Footer
Wir stoßen häufig auf dieses Problem: Wie kann ma...
Windows 2019 Aktivierungs-Tutorial (Office2019)
Vor ein paar Tagen habe ich erfahren, dass die of...
In WMP eingebettetes HTML, kompatibel mit Chrome und IE, detaillierte Einführung
Tatsächlich gibt es viele entsprechende Schreibme...
Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten
Vorwort: Die verteilte Master-Slave-Architektur v...
10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen
Merkmale einer Single-Page-Anwendung „Annahme:“ A...