JavaScript zur Nachahmung der Registrierungs- und Anmeldefunktion der offiziellen Xiaomi-Website
|
Das Wirkungsdiagramm sieht wie folgt aus:
Zuerst müssen wir das Seitenlayout erstellenDer HTML-Code lautet wie folgt:
<div Klasse="contentrightbottom">
<div Klasse="contentrightbottombox">
<div Klasse="crbottomlogin">
<div class="login"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Anmelden</a></div>
<div class="regist"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Registrierung</a></div>
</div>
<div Klasse="loginregistbox">
<ul>
<li>
<div Klasse="crbottomcontent">
<input type="text" placeholder="E-Mail/Handynummer/Xiaomi-ID" class="user">
<br>
<p class="pzh">Bitte geben Sie Ihre Kontonummer ein</p>
<div Klasse="pwdeyebox">
<input type="Passwort" Platzhalter="Passwort" Klasse="pwd"><br>
<img src="schließen.png" alt="" class="eye">
</div>
<p class="pmm">Bitte geben Sie Ihr Passwort ein</p>
<Eingabetyp="Kontrollkästchen" Klasse="Checks">
<span>Ich habe die Bedingungen des Xiaomi-Kontos gelesen und stimme ihnen zu</span>
Benutzervereinbarung
<span> und </span>
<span>Datenschutzrichtlinie</span><br>
<button>Anmelden</button><br>
<span class="forgetpwd"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Passwort vergessen? </a></span>
<span class=" phonelogin"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Mobiltelefonnummer-Login</a></span>
<p class="other">Andere Anmeldemethoden</p>
<div Klasse="crbottomcontentimg">
<span><img src="share1.png" alt=""></span>
<span><img src="share2.png" alt=""></span>
<span><img src="share3.png" alt=""></span>
<span><img src="share4.png" alt=""></span>
</div>
</div>
</li>
<li>
<div Klasse="crbottomcontentregist">
<input type="text" placeholder="Bitte geben Sie Ihr Registrierungskonto ein" class="ruser">
<p class="rpzh">Bitte geben Sie Ihre Kontonummer ein</p>
<br>
<input type="password" placeholder="Bitte geben Sie Ihr Passwort ein" class="rpwd">
<p class="rpmm">Bitte geben Sie Ihr Passwort ein</p><br>
<input type="number" class="rphone" placeholder="SMS-Bestätigungscode">
<p class="rpyzm">Bitte geben Sie den Bestätigungscode ein</p><br>
<Eingabetyp="Kontrollkästchen" Klasse="Checks">
<span>Ich habe die Bedingungen des Xiaomi-Kontos gelesen und stimme ihnen zu</span>
Benutzervereinbarung
<span> und </span>
<span>Datenschutzrichtlinie</span><br>
<button>Anmelden</button><br>
<span class="forgetpwd"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Passwort vergessen? </a></span>
<span class=" phonelogin"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Mobiltelefonnummer-Login</a></span>
<p class="other">Andere Anmeldemethoden</p>
<div Klasse="crbottomcontentimg">
<span><img src="share1.png" alt=""></span>
<span><img src="share2.png" alt=""></span>
<span><img src="share3.png" alt=""></span>
<span><img src="share4.png" alt=""></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<p class="conpany">Copyright by Xiaomi Corporation – Beijing ICP Nr. 10046444 – Beijing Public Security Bureau Nr. 11010802020134</p>
</div>
Die gesamte Login-Registrierung ist in zwei Felder unterteilt: Das Feld oben enthält zwei Textfelder, Anmelden und Registrieren, die als JS-Klick- und Schiebeschaltflächen dienen Die folgende Box verwendet kleine li, um die Anmelde- und Registrierungsfelder zu halten, und lässt dann die kleinen li schweben, sodass die Anmelde- und Registrierungsfelder in einer Zeile schweben, und fügt dann das Attribut overfl:hidden zur großen Box contentrightbottombox hinzu. Nachdem der Überschuss ausgeblendet ist, können wir den JS-Funktionscode schreiben
JS-Funktion 1Klicken Sie hier, um sich anzumelden und zu registrieren, um zu wechseln
In CSS verwenden wir das kleine „li“-Float, um die Anmelde- und Registrierungsfelder in einer Reihe schweben zu lassen. Wenn wir auf die Schaltfläche „Registrieren“ klicken, müssen wir nur das „UL“, das das kleine „li“ umschließt, in das Registrierungsfeld verschieben. Wenn wir auf die Schaltfläche „Anmelden“ klicken, müssen wir ul nur in das Anmeldefeld verschieben. Der Code lautet wie folgt:
var registbtn = document.querySelector('.regist');
var loginbtn = document.querySelector('.login');
var loginregistbox = document.querySelector('.loginregistbox');
var boxul = loginregistbox.querySelector('ul');
registbtn.addEventListener('klicken', Funktion () {
boxul.style.transition = "alle 0,3 s";
boxul.style.transform = "übersetzenX(-414px)";
registbtn.style.borderBottom = '4px durchgezogen #FF6900';
loginbtn.style.borderBottom = "keine";
});
loginbtn.addEventListener('klicken', Funktion () {
boxul.style.transition = "alle 0,3 s";
boxul.style.transform = "translateX(0px)";
loginbtn.style.borderBottom = '4px durchgezogen #FF6900';
registbtn.style.borderBottom = "keine";
});JS-Funktion 2Klicken Sie auf den Text im Eingabefeld, um ihn zu verkleinern bzw. nach oben zu verschieben.
Beim Login auf der offiziellen Xiaomi-Website wird es mithilfe des Label-Tags implementiert. Um es zu implementieren, füge ich dem Platzhalter in der Eingabe direkt einen Stil hinzu. Wir modifizieren den Stil des Platzhalters mithilfe einer Pseudoklasse und positionieren ihn so, dass er schrumpft und an die gewünschte Position verschoben wird, und fügen einen Übergang hinzu, damit er etwas besser aussieht. Der Code lautet wie folgt:
var Benutzer = document.querySelector('.user');
var pwd = document.querySelector('.pwd');
var pzh = document.querySelector('.pzh');
var pmm = document.querySelector('.pmm');
Benutzer.addEventListener('Fokus', Funktion () {
user.style.border = '1px durchgehend rot';
Benutzer.style.boxShadow = '0 0 1px 2px #FFDECC';
Benutzer.Stil.Hintergrundfarbe = "#FCF2F3";
Benutzer.Stil.Übergang = „alle 0,3 s“;
Benutzer.setAttribute('Klasse', 'Benutzer change1');
});
.change1::placeholder{
Position: absolut;
oben: 5px;
links: 20px;
Schriftgröße: 12px;
Farbe: #C1C1C1;
Übergang: alle 0,3 s;
}
.change2::placeholder{
Schriftgröße: 17px;
Farbe: rot;
Übergang: alle 0,3 s;
}JS-Funktion 3Es erscheint die Eingabeaufforderung „Bitte geben Sie Ihre Kontonummer ein“
Fügen Sie in HTML ein p-Tag hinzu (andere Tags sind auch OK), ändern Sie seinen Stil in CSS und geben Sie ihm einen Anzeigestil, um es auszublenden Wenn Sie in js den Fokus verlieren, stellen Sie fest, ob das Textfeld einen Wert enthält. Wenn ein Wert vorhanden ist, blenden Sie ihn aus, andernfalls zeigen Sie ihn an Der Code lautet wie folgt:
Benutzer.addEventListener('unscharf', Funktion () {
Benutzer.Stil.Rahmen = "keine";
Benutzer.style.boxShadow = "keine";
Benutzer.Stil.Übergang = "alle .3s";
wenn (Benutzer.Wert == '') {
pzh.style.display = "Block";
Benutzer.Stil.Hintergrundfarbe = "#FCF2F3";
Benutzer.setAttribute('Klasse', 'Benutzer change2');
} anders {
pzh.style.display = "keine";
Benutzer.Stil.Hintergrundfarbe = '#F9F9F9';
Benutzer.Stil.Schriftgröße = "17px";
Benutzer.setAttribute('Klasse', 'Benutzer change1');
}
});
.rpzh,.rpmm,.rpyzm{
Anzeige: keine;
Farbe: rot;
Schriftgröße: 12px;
Rand oben: 10px;
Rand links: 40px;
Rand unten: -30px;
}JS-Funktion 4Passwort anzeigen und Passwort verbergen
Definieren Sie eine Flag-Variable, um das Umschalten des Schalterbildes und den Wert des Typattributs in der Eingabe zu steuern
Var-Flagge = 0;
eyes.addEventListener('klicken', Funktion () {
wenn (Flagge == 0) {
pwd.Typ = "Text";
augen.src = "öffnen.png";
Flagge = 1;
}
anders {
pwd.type = "Passwort";
eyes.src = "schließen.png";
Flagge = 0;
}
});Dies ist das Ende dieses Artikels über die Implementierung der Registrierungs- und Anmeldefunktionen der offiziellen Xiaomi-Website mit JavaScript. Weitere relevante JavaScript-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
>>: Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS3
Artikel empfehlen
Beispiel für die Installation von Kong Gateway in Docker
1. Erstellen Sie ein Docker-Netzwerk Docker-Netzw...
Das WeChat-Applet implementiert das Schlangenspiel
In diesem Artikel wird der spezifische Code des W...
Tutorial zur Installation von MYSQL8.X auf Centos
MySQL-Installation (4, 5, 6 können weggelassen we...
Erweiterte Docker-Methode zur schnellen Erweiterung
1. Befehlsmethode Führen Sie den Nginx-Dienst im ...
Lösung für das React-Programm „reine Funktionskomponente setState“ aktualisiert die Seitenaktualisierung nicht
Inhaltsverzeichnis Problembeschreibung: Ursachena...
So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306
Port 80 ist ebenfalls konfiguriert. Geben Sie zun...
Kreatives „Über uns“-Webseitendesign
Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...
Linux verwendet if, um zu bestimmen, ob ein Verzeichnis existiert.
So verwenden Sie „if“ in Linux, um festzustellen,...
vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung generischer Fälle in TypeScript
Definition von Generika // Anforderung 1: Generik...
Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)
Der erste Schritt beim Design ist immer die Optimi...
Lösen Sie das Problem der automatischen HTML-Formatierung nach dem Speichern in vscode
Die Version von vsCode wurde in den letzten Tagen...
Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS
Voraussetzung: content="width=750" <...
Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen
In den meisten Fällen unterstützt MySQL Chinesisc...
Zusammenfassung der XHTML-Tags auf Blockebene
* Adresse - Adresse * Blockzitat - Blockzitat * Mi...