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:

JavaScript-Countdown und Popup-Fenster mit Spezialeffekten
JS-Countdown-Implementierungscode (Stunden, Minuten, Sekunden)
JS-Countdown (Tage, Stunden, Minuten, Sekunden)
Einfacher und leicht zu verwendender Countdown-JS-Code
js-Code zur Realisierung des 60-Sekunden-Countdowns beim Klicken auf die Schaltfläche
2 einfache JS-Countdown-Methoden
Beispiel für die Implementierung einer einfachen Countdown-Funktion mit nativem JS
js Countdown-Sprungbeispiel nach ein paar Sekunden
Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten

<<: Detailliertes Tutorial zur Installation von JDK1.8 unter Linux

>>: MySQL InnoDB-Überwachung (Systemebene, Datenbankebene)