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
Detaillierte Anweisungen zur Installation der MySQL5.7-Datenbank unter Centos7.2
Das MySQL auf dem Server ist in der Version 8.0.1...
Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL
Inhaltsverzeichnis Implementierung einer Suchmasc...
6 Möglichkeiten, die Maximal- und Minimalwerte eines Arrays in Javascript zu implementieren
Gegeben: Ein Array [1,8,5,4,3,9,2], schreiben Sie...
js-Code, der den Button mit der Eingabetaste verknüpft
Code kopieren Der Code lautet wie folgt: <html...
Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
1. BIOS überprüfen Überprüfen Sie zunächst, in we...
W3C Tutorial (13): W3C WSDL Aktivitäten
Bei Webdiensten geht es um die Kommunikation zwis...
Der Unterschied zwischen dem Dezimaltyp und dem Float Double in MySQL (ausführliche Erklärung)
MySQL verfügt über nicht standardmäßige Datentype...
Die JS-Methoden addEventListener() und attachEvent() implementieren Registrierungsereignisse
Im DOM-Ereignismodell von JavaScript werden Ereig...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10
In diesem Artikel wird die Installations- und Kon...
So verwenden Sie den EXPLAIN-Befehl in SQL
Bei unserer täglichen Arbeit führen wir manchmal ...
Beispielcode für den Song-Fortschrittsbalken in Vue
Beachten Sie, dass dies kein von vue-cli erstellt...
Lösung zur automatischen Beendigung von Docker Run-Containern
Heute ist bei mir ein Problem aufgetreten, als ic...
Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3
Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...
Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters
Während des Crawler-Entwicklungsprozesses sind Si...
HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)
Ich glaube, jeder hat schon einmal Rubbellose ges...