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
Docker creates MySQL explanation
1. Download MySQL Image Command: docker pull mysq...
How to implement two-way binding function in vue.js with pure JS
Table of contents First, let's talk about the...
Detailed explanation of linux crm deployment code
Linux basic configuration Compile and install pyt...
Use of Linux ln command
1. Command Introduction The ln command is used to...
How to implement checkbox & radio alignment
Not only do different browsers behave differently...
JavaScript to achieve balance digital scrolling effect
Table of contents 1. Implementation Background 2....
Implementation of waterfall layout + dynamic rendering
Table of contents Typical waterfall website Water...
MySql cache query principle and cache monitoring and index monitoring introduction
Query Cache 1. Query Cache Operation Principle Be...
JavaScript flow control (loop)
Table of contents 1. for loop 2. Double for loop ...
The marquee tag in HTML achieves seamless scrolling marquee effect
The <marquee> tag is a tag that appears in ...
Pure CSS to achieve cool charging animation
Let’s take a look at what kind of charging animat...
JavaScript to achieve a simple page countdown
This article example shares the specific code of ...
Docker overlay realizes container intercommunication across hosts
Table of contents 1. Docker configuration 2. Crea...
JavaScript design pattern learning adapter pattern
Table of contents Overview Code Implementation Su...
CSS3 realizes the website product display effect diagram
This article introduces the effect of website pro...