JavaScript zur Implementierung des Anmeldeformulars
|
In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung des Anmeldeformulars zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
Idee : Platzieren Sie das Anmeldefenster außerhalb der Schnittstelle und ändern Sie es dann über die Funktion im Skript in die Schnittstelle!
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Mein Login-Formular</title>
<Stil>
.loginDiv{
/*Das Erscheinungsbild des Anmeldefensters festlegen*/
Rand: durchgehend rot 3px;
Rahmenradius: 10px;
Breite: 350px;
Höhe: 250px;
Hintergrundfarbe: himmelblau;
/*Legen Sie den Speicherort des Anmeldefelds fest*/
Position: absolut;
oben: -300px;
}
Taste{
/*Den Stil der Schaltfläche festlegen*/
Rahmenradius: 3px;
}
#schließenDiv{
/*Position der Schaltfläche „Schließen“ festlegen*/
Position: relativ;
oben: -160px;
links: 305px;
}
</Stil>
</Kopf>
<Text>
<a href="javaScript:login()" >Anmeldefenster</a>
<div Klasse="loginDiv" id="loginDiv">
<h2 align="center">Anmeldefenster</h2>
<Tabelle ausrichten="zentrieren">
<tr>
<th>Benutzername:</th>
<th><Eingabetyp="Text"></th>
</tr>
<tr>
<th>Passwort:</th>
<th><input type="Passwort"></th>
</tr>
<tr>
<th colspan="2">
<button>Anmelden</button> 
<button type="reset">Zurücksetzen</button>
</th>
</tr>
</Tabelle>
<div id="closeDiv"><a href="javaScript:close()" >[Schließen]</a></div>
</div>
<Skript>
Funktion login() {
//Login-Objekt abrufen let loginDivObj = document.getElementById("loginDiv");
loginDivObj.style.top="100px";
//Übergangseigenschaften festlegen, siehe transitionProperty: Gibt den Namen der CSS-Eigenschaft an, auf die der Übergangseffekt angewendet wird.
// Referenz 2: transitionDuration: gibt an, wie viele Sekunden oder Millisekunden zum Abschließen des Übergangseffekts benötigt werden.
// Parameter 3: transitionTimingFunction: Gibt die Geschwindigkeitskurve des Übergangseffekts an.
// Referenz 4: transitionDelay: definiert, wann der Übergangseffekt beginnt.
loginDivObj.style.transition="obere 600 ms, lineare 500 ms";
}
Funktion schließen() {
//Login-Objekt abrufen let loginDivObj = document.getElementById("loginDiv");
loginDivObj.style.top="-300px";
}
</Skript>
</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:
|
<<: So verbessern Sie die MySQL Limit-Abfrageleistung
>>: Die Entsprechung zwischen Tomcat- und JDK-Versionen und die Funktionen jeder Tomcat-Version
Artikel empfehlen
Informationen zum Textumbruchproblem bei IE-Labels (LI)
Ich habe lange damit gekämpft und nach einiger Suc...
Zusammenfassung der Verwendung von JavaScript JSON.stringify()
Inhaltsverzeichnis 1. Nutzung 1. Grundlegende Ver...
Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste
ElementUI implementiert das Tutorial zum Paginier...
MySQL-Sortierprinzipien und Fallanalyse
Vorwort Das Sortieren ist eine grundlegende Funkt...
Lösung für die leere Seite nach einem vue.js-gepackten Projekt
Ich glaube, dass viele Partner, die gerade erst m...
W3C Tutorial (4): W3C XHTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
In diesem Artikelbeispiel wird der spezifische Co...
Verstehen Sie die Grundlagen von Navicat für MySQL in einem Artikel
Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...
So verwenden Sie Gitlab-ci zur kontinuierlichen Bereitstellung auf Remotecomputern (ausführliches Tutorial)
Kurz gesagt, heute sprechen wir über die Verwendu...
Vue implementiert Upload-Komponente
Inhaltsverzeichnis 1. Einleitung 2. Ideen Zwei Mö...
Was sind die Unterschiede zwischen CDN, SCDN und DCDN zur Website-Beschleunigung? Wie man wählt?
1. CDN Es ist die am häufigsten verwendete Beschl...
Detaillierte Erklärung der Angular-Komponentenprojektion
Inhaltsverzeichnis Überblick 1. Einfaches Beispie...
Spezifische Verwendung von Docker Anonymous Mount und Named Mount
Inhaltsverzeichnis Datenvolumen Anonyme und benan...
So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu
Einführung Nach dem Kompilieren, Installieren und...