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
Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen
Dieser Artikel fasst die Implementierungsmethoden...
Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS
Hier stellen wir den CentOS-Server mit installier...
Detaillierte Beispiele für Variablen- und Funktionspromotion in JavaScript
js-Ausführung Phase der lexikalischen Analyse: um...
Lösung für das MySQL IFNULL-Beurteilungsproblem
Problem: Die von mybatis zurückgegebenen Daten vo...
Details zur Destrukturierungszuweisung in Javascript
Inhaltsverzeichnis 1. Array-Dekonstruktion 2. Obj...
Nachdem Idea das Webprojekt veröffentlicht hat, kann der Tomcat-Server das Projekt und seine Lösung nicht finden
Überblick Das Projekt wurde erfolgreich erstellt ...
Lösung für das Problem mit verstümmeltem MySQL-Code unter Linux
Das Projekt interagiert mit dem Server, greift üb...
MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter CentOS7
Deinstallieren Sie die alte MySQL-Version (übersp...
Beispiel einer Autorisierungsüberprüfungsmethode von Nest.js
Inhaltsverzeichnis 0x0 Einführung 0x1 RBAC-Implem...
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
Implementierung der privaten Docker-Bibliothek
Die Installation und Bereitstellung eines private...
jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
Gewünschte Wirkung: Nach dem Klick auf die Übermi...
Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung
Inhaltsverzeichnis 1.kvm-Bereitstellung 1.1 KVM-I...
Detaillierte Erklärung der MySQL-Berechtigungssteuerung
Inhaltsverzeichnis MySQL-Berechtigungskontrolle B...
CSS füllt das übergeordnete Container-Div mit img-Bildern und passt sich der Containergröße an
Wenn auf einer Seite mehrere Bilder eingefügt wer...