JavaScript仿小米官網註冊登入功能的實現
阿新 • • 發佈：2021-11-24
目錄
- 首先我們需要搭建好頁面佈局
- 功能1
- JS功能2
- JS功能3
- JS功能4
效果圖如下：
首先我們需要搭建好頁面佈局
html的程式碼如下：
<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" >登入</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" >註冊</a></div>
</div>
<div class="loginregistbox">
<ul>
<li>
<div class="crbottomcontent">
<input type="text" placeholder="郵箱/手機號碼/小米ID" class="user">
<br>
<p class="pzh">請輸入賬號</p>
<div class="pwdeyebox">
<input type="password" placeholder="密碼" class="pwd"><br>
<img src="close.png" alt="JuKLfWOl
整個登入註冊分為上下兩個盒子：
上面的盒子裝登入和註冊兩個文字盒子，作為JS的點選滑動按鈕
下面的盒子使用小li分別裝登入和註冊兩個盒子，然後讓小li浮動起來，讓登入註冊兩個盒子浮動在一行，然後給contentrightbottombox這個大盒子新增overfl:hidden屬性，超出的隱藏起來之後我們就可以寫JS功能程式碼了
JS功能1
點選登入註冊進行切換
在裡面我們通過小li的浮動將登入和註冊的盒子浮動在一排
當我們點選註冊按鈕的時候只需要讓包裹小li的ul移動到註冊盒子上面即可
當我們點選登入按鈕的時候也只需要讓ul移動到登入的盒子上面
程式碼如下：
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功能2
點選input盒子裡面的文字縮小並往上移動
在小米官網的登入裡面，它是使用lable標籤來實現，我是直接給input裡面的placeholder新增樣式來實現
修改placeholder的樣式我們是通過偽類的方式實現，並且給它定位讓它縮小後移動到要求的位置，並且加上了過渡，看起來好看一點點
程式碼如下：
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功能3
跳出提示"請輸入賬號"
在html新增一個p標籤(其他標籤也可以)，在css裡面修改他的樣式並給它display樣式讓他隱藏起來
在js裡面 失去焦點的時候判斷文字框裡面是否有值，有值就讓他隱藏，否則就顯示
程式碼如下：
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功能4
顯示密碼和隱藏密碼
定義一個flag變數來控制開關圖片的切換和input中的type屬性中的值
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;
}
});
到此這篇關於JavaScript仿小米官網註冊登入功能的實現的文章就介紹到這了,更多相關JavaScript 的內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！