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 the use of MySQL concatenation function CONCAT
The previous articles introduced the replacement ...
Windows 2016 Server Security Settings
Table of contents System update configuration Cha...
js development plug-in to achieve tab effect
This article example shares the specific code of ...
Detailed tutorial on installing MySQL 8.0 from source code on CentOS 7.4
Table of contents 1. Environment 2. Preparation 3...
Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)
The general way of writing is as follows: XML/HTM...
Self-understanding of the background-position attribute in background image positioning
Recently, I need to use a lot of fragmented pictu...
How to configure the OpenWRT development environment on Ubuntu 18.04 (physical machine)
1. Install a virtual machine (physical machine) Y...
Detailed explanation of Windows time server configuration method
Recently, I found that the company's server t...
Example code of how to create a collapsed header effect using only CSS
Collapsed headers are a great solution for displa...
Pure CSS to display the √ sign in the lower right corner after selecting the product
Recommended articles: Click on the lower right co...
How to call the browser sharing function in Vue
Preface Vue (pronounced /vjuː/, similar to view) ...
The latest 36 high-quality free English fonts shared
01. Infinity Font Download 02. Banda Font Download...
How to install Nginx in CentOS
Official documentation: https://nginx.org/en/linu...
Detailed explanation of the specific use of the ENV instruction in Dockerfile
1. The ENV instruction in the Dockerfile is used ...
Summary of JavaScript custom object methods
Table of contents 1. Use object to create an obje...