Beispiel für ein JavaScript-Meldungsfeld

Beispiel für ein JavaScript-Meldungsfeld

In JavaScript können drei Arten von Meldungsfeldern erstellt werden: Warnfelder, Bestätigungsfelder und Eingabeaufforderungsfelder.

Warnfeld

Warnfelder werden normalerweise verwendet, um sicherzustellen, dass Benutzer bestimmte Informationen erhalten.

Wenn das Warnfeld angezeigt wird, muss der Benutzer auf die Schaltfläche „OK“ klicken, um den Vorgang fortzusetzen.

Syntaxformat:

window.alert("Warntext");

Beispiel-Quellcode:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Beispiel für eine JS-Warnmeldung</title>
<Skript>
Funktion meineFunktion(){
 alert("Hehe, das ist ein Warnfeld!");
}
</Skript>
</Kopf>
<Text>
 
<input type="button" onclick="myFunction()" value="Warnfeld anzeigen" />
 
</body>
</html>

Speichern unter: JS Warning Box example.html

Führen Sie den Test mit einem Browser aus. Die Ergebnisse sind wie folgt:

Bestätigungsfeld

Bestätigungsfelder werden häufig verwendet, um zu überprüfen, ob eine Benutzeraktion akzeptiert wurde.

Wenn das Bestätigungsfeld angezeigt wird, kann der Benutzer auf „Bestätigen“ oder „Abbrechen“ klicken, um den Benutzervorgang zu bestätigen.

Wenn Sie auf „Bestätigen“ klicken, gibt das Bestätigungsfeld „True“ zurück, wenn Sie auf „Abbrechen“ klicken, gibt das Bestätigungsfeld „False“ zurück.

Syntaxformat:

window.confirm("text");

Beispiel-Quellcode:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Beispiel einer JS-Bestätigungsbox</title>
</Kopf>
<Text>
 
<p>Klicken Sie auf die Schaltfläche, um ein Bestätigungsfeld anzuzeigen. </p>
<button onclick="myFunction()">Klick mich</button>
<p id="demo"></p>
<Skript>
Funktion meineFunktion(){
 var x;
 var r=confirm("Hehe, das ist ein Box-Beispiel!");
 wenn (r==true){
  //x="Sie haben die Schaltfläche \"OK\" gedrückt!";
  x='Sie haben die Schaltfläche "OK" gedrückt!';
 }
 anders{
  //x="Sie haben die Schaltfläche \"Abbrechen\" gedrückt!";
  x='Sie haben die Schaltfläche "Abbrechen" gedrückt!';
 }
 document.getElementById("demo").innerHTML=x;
}
</Skript>
 
</body>
</html>

Speichern unter: JS Bestätigungsbox example.html

Führen Sie den Test mit einem Browser aus. Die Ergebnisse sind wie folgt:

Trinkgeld-Box

Eingabeaufforderungsfelder werden normalerweise verwendet, um Benutzer aufzufordern, vor dem Aufrufen der Seite einen Wert einzugeben.

Wenn das Eingabeaufforderungsfeld angezeigt wird, muss der Benutzer einen Wert eingeben und dann auf die Schaltfläche „Bestätigen“ oder „Abbrechen“ klicken, um den Vorgang fortzusetzen.

Wenn der Benutzer auf „OK“ klickt, ist der Rückgabewert der eingegebene Wert. Wenn der Benutzer auf „Abbrechen“ klickt, ist der Rückgabewert null.

Syntaxformat:

window.prompt("Eingabeaufforderungstext","Standardwert");

Beispiel-Quellcode:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Beispiel für eine JS-Eingabeaufforderung</title>
</Kopf>
<Text>
 
<p>Klicken Sie auf die Schaltfläche, um den Eingabedialog anzuzeigen. </p>
<button onclick="myFunction()">Klick mich</button>
<p id="demo"></p>
<Skript>
Funktion meineFunktion(){
 var x;
 var person = prompt("Bitte geben Sie Ihren Namen ein", "Tom");
 wenn (Person!=null && Person!=""){
     x="Hallo" + Person + "! Wie fühlst du dich heute?";
     document.getElementById("demo").innerHTML=x;
 }
}
</Skript>
 
</body>
</html>

Speichern unter: JS-Eingabeaufforderungsfeld example.html

Führen Sie den Test mit einem Browser aus. Die Ergebnisse sind wie folgt:

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:
  • Zusammenfassung häufig verwendeter Meldungsfelder in JS
  • JavaScript-Meldungsfeldeffekt [Implementierungscode]
  • Detaillierte Erläuterung der Entwurfsprinzipien des Client Message Frameworks in JavaScript
  • Extjs4-Meldungsfeld entfernt die Schaltfläche „Schließen“ (ähnlich wie Ext.Msg.alert)

<<:  So verwenden Sie mysqladmin, um die aktuellen TPS und QPS einer MySQL-Instanz abzurufen

>>:  Lösen Sie schnell das Problem des langsamen Tomcat-Starts, super einfach

Artikel empfehlen

js, um Drag & Drop-Sortierdetails zu erreichen

Inhaltsverzeichnis 1. Einleitung 2. Umsetzung 3. ...

Erstellen der Benutzererfahrung

<br />Vielleicht sind Sie gerade in ein Unte...

Eine kurze Analyse von MySQL - MVCC

Versionskette In den Tabellen der InnoDB-Engine g...

js-Speicherleckszenarien, wie man sie im Detail überwacht und analysiert

Inhaltsverzeichnis Vorwort Welche Situationen kön...

Vollständige Analyse des Vue-Diff-Algorithmus

Inhaltsverzeichnis Vorwort Vue-Aktualisierungsans...

Detailliertes Tutorial zur Installation von Python 3.8.1 unter Linux

Dieses Beispiel nimmt die Installation von Python...

Freigabe der Schritte zum SVN-Dienstsicherungsvorgang

Schritte zur Sicherung des SVN-Dienstes 1. Quells...

Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses

Fehlerbeschreibung: 1. Nach der Installation von ...

Dieser Artikel zeigt Ihnen detailliert, wie Sie SQL CASE WHEN verwenden

Inhaltsverzeichnis Einfache CASEWHEN-Funktion: Di...

Implementierungsbeispiel für den Linux-Befehl „tac“

1. Befehlseinführung Der Befehl tac (umgekehrte R...