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
Die neueste Version von MySQL 8.0.22 herunterladen und installieren - super ausführliches Tutorial (Windows 64 Bit)
Inhaltsverzeichnis Vorwort 1. Laden Sie MySQL 8.0...
Bringen Sie Ihnen den detaillierten Prozess der Verwendung von Docker zum Erstellen der chinesischen Version der Gitlab-Community bei
1. Verwenden Sie Docker Compose, um den Start zu ...
JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts
In tatsächlichen Projekten befinden sich die Bild...
Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)
Kürzlich wurde auf Unternehmensseite gemeldet, da...
Vue implementiert nahtloses Scrollen von Listen
In diesem Artikelbeispiel wird der spezifische Co...
Projektpraxis zum Bereitstellen von Docker-Containern mit Portainer
Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...
Zusammenfassung der Binlog-Nutzung der MySQL-Datenbank (unbedingt lesen)
Ich werde nicht näher darauf eingehen, wie wichti...
js zur Realisierung eines einfachen Puzzlespiels
In diesem Artikel wird der spezifische Code von j...
Beispiel für die Verwendung von mycat zur Implementierung der Lese-/Schreibtrennung in MySQL-Datenbanken
Was ist MyCAT Ein vollständig Open Source-Großdat...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
CentOS7 64-Bit-Installation MySQL Grafik-Tutorial
Voraussetzungen für die Installation von MySQL: I...
Spezifische Implementierungsmethoden für MySQL-Tabellen-Sharding und -Partitionierung
Vertikaler Tisch Vertikale Tabellenaufteilung bed...
Vue Routing gibt die Betriebsmethode zum Wiederherstellen des Seitenstatus zurück
Routenparameter, Routennavigationswächter: Beibeh...
Sieben Prinzipien eines guten Designers (2): Farbgebrauch
<br />Vorheriger Artikel: Sieben Prinzipien ...