JavaScript to imitate the registration and login function of Xiaomi official website
|
The effect diagram is as follows:
First we need to build the page layoutThe html code is as follows:
<div class="contentrightbottom">
<div class="contentrightbottombox">
<div class="crbottomlogin">
<div class="login"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Login</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" >Registration</a></div>
</div>
<div class="loginregistbox">
<ul>
<li>
<div class="crbottomcontent">
<input type="text" placeholder="Email/mobile phone number/Xiaomi ID" class="user">
<br>
<p class="pzh">Please enter your account number</p>
<div class="pwdeyebox">
<input type="password" placeholder="password" class="pwd"><br>
<img src="close.png" alt="" class="eye">
</div>
<p class="pmm">Please enter your password</p>
<input type="checkbox" class="checks">
<span>I have read and agreed to Xiaomi Account</span>
User Agreement
<span> and </span>
<span>Privacy Policy</span><br>
<button>Login</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" >Forgot your password? </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" >Mobile phone number login</a></span>
<p class="other">Other login methods</p>
<div class="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 class="crbottomcontentregist">
<input type="text" placeholder="Please enter your registration account" class="ruser">
<p class="rpzh">Please enter your account number</p>
<br>
<input type="password" placeholder="Please enter your password" class="rpwd">
<p class="rpmm">Please enter your password</p><br>
<input type="number" class="rphone" placeholder="SMS verification code">
<p class="rpyzm">Please enter the verification code</p><br>
<input type="checkbox" class="checks">
<span>I have read and agreed to Xiaomi Account</span>
User Agreement
<span> and </span>
<span>Privacy Policy</span><br>
<button>Login</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" >Forgot your password? </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" >Mobile phone number login</a></span>
<p class="other">Other login methods</p>
<div class="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 No. 10046444 - Beijing Public Security Bureau No. 11010802020134</p>
</div>
The entire login registration is divided into two boxes: The box above contains two text boxes, Login and Register, which serve as JS click and slide buttons The box below uses small li to hold the login and registration boxes respectively, and then makes the small li float, so that the login and registration boxes float in one line, and then adds the overfl:hidden attribute to the large box contentrightbottombox. After the excess is hidden, we can write the JS function code
JS function 1Click to log in and register to switch
In CSS, we use the small li float to float the login and registration boxes in a row. When we click the registration button, we just need to move the ul that wraps the small li to the registration box. When we click the login button, we only need to move ul to the login box. The code is as follows:
var registbtn = document.querySelector('.regist');
var loginbtn = document.querySelector('.login');
var loginregistbox = document.querySelector('.loginregistbox');
var boxul = loginregistbox.querySelector('ul');
registbtn.addEventListener('click', function () {
boxul.style.transition = 'all 0.3s';
boxul.style.transform = 'translateX(-414px)';
registbtn.style.borderBottom = '4px solid #FF6900';
loginbtn.style.borderBottom = 'none';
});
loginbtn.addEventListener('click', function () {
boxul.style.transition = 'all 0.3s';
boxul.style.transform = 'translateX(0px)';
loginbtn.style.borderBottom = '4px solid #FF6900';
registbtn.style.borderBottom = 'none';
});JS function 2Click the text in the input box to shrink and move it up
In the login of Xiaomi official website, it is implemented using label tag. I directly add style to the placeholder in input to implement it. We modify the style of the placeholder by using a pseudo-class, and position it so that it shrinks and moves to the required position, and add a transition to make it look a little better. The code is as follows:
var user = document.querySelector('.user');
var pwd = document.querySelector('.pwd');
var pzh = document.querySelector('.pzh');
var pmm = document.querySelector('.pmm');
user.addEventListener('focus', function () {
user.style.border = '1px solid red';
user.style.boxShadow = '0 0 1px 2px #FFDECC';
user.style.backgroundColor = '#FCF2F3';
user.style.transition = 'all 0.3s';
user.setAttribute('class', 'user change1');
});
.change1::placeholder{
position: absolute;
top: 5px;
left: 20px;
font-size: 12px;
color: #C1C1C1;
transition: all .3s;
}
.change2::placeholder{
font-size: 17px;
color: red;
transition: all .3s;
}JS function 3A prompt pops up saying "Please enter your account number"
Add a p tag in HTML (other tags are also OK), modify its style in CSS and give it a display style to hide it When losing focus in js, determine whether there is a value in the text box. If there is a value, hide it, otherwise display it The code is as follows:
user.addEventListener('blur', function () {
user.style.border = 'none';
user.style.boxShadow = 'none';
user.style.transition = 'all .3s';
if (user.value == '') {
pzh.style.display = 'block';
user.style.backgroundColor = '#FCF2F3';
user.setAttribute('class', 'user change2');
} else {
pzh.style.display = 'none';
user.style.backgroundColor = '#F9F9F9';
user.style.fontSize = '17px';
user.setAttribute('class', 'user change1');
}
});
.rpzh,.rpmm,.rpyzm{
display: none;
color: red;
font-size: 12px;
margin-top: 10px;
margin-left: 40px;
margin-bottom: -30px;
}JS function 4Show password and hide password
Define a flag variable to control the switching of the switch image and the value of the type attribute in the input
var flag = 0;
eyes.addEventListener('click', function () {
if (flag == 0) {
pwd.type = 'text';
eyes.src = 'open.png';
flag = 1;
}
else {
pwd.type = 'password';
eyes.src = 'close.png';
flag = 0;
}
});This is the end of this article about how to implement the registration and login functions of Xiaomi's official website using JavaScript. For more relevant JavaScript content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: Detailed explanation of the use of filter properties in CSS3
Recommend
Detailed explanation of MySQL master-slave replication practice - GTID-based replication
GTID-based replication Introduction GTID-based re...
Installation tutorial of the latest stable version of MySQL 5.7.17 under Linux
Install the latest stable version of MySQL on Lin...
Recommend 60 paging cases and good practices
<br />Structure and hierarchy reduce complex...
How to implement Echats chart large screen adaptation
Table of contents describe accomplish The project...
Detailed explanation of the solution to the nginx panic problem
Regarding the nginx panic problem, we first need ...
React event binding details
Table of contents Class component event binding F...
Why is it not recommended to use an empty string as a className in Vue?
Table of contents Compare the empty string '&...
Implementation of Docker private library
Installing and deploying a private Docker Registr...
How to communicate between WIN10 system and Docker internal container IP
1. After installing the Windows version of Docker...
Full steps to create a password generator using Node.js
Table of contents 1. Preparation 2. Writing comma...
Let you understand how HTML and resources are loaded
All content in this blog is licensed under Creati...
Solution to the problem of session failure caused by nginx reverse proxy
A colleague asked for help: the login to the back...
The concrete implementation of JavaScript exclusive thinking
In the previous blog, Xiao Xiong updated the meth...
Windows10 mysql 8.0.12 non-installation version configuration startup method
This article shares the specific steps for config...
Detailed usage of Vue more filter widget
This article example shares the implementation me...