JavaScript仿小米官網(wǎng)注冊登錄功能的實現(xiàn)
更新時間：2021年11月23日 09:58:58 作者：愛做夢的沙丁魚
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)仿小米官網(wǎng)登錄注冊完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
效果圖如下：
首先我們需要搭建好頁面布局
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="" class="eye">
</div>
<p class="pmm">請輸入密碼</p>
<input type="checkbox" class="checks">
<span>已閱讀并同意小米賬號</span>
<span>用戶協(xié)議</span>
<span>和</span>
<span>隱私政策</span><br>
<button>登錄</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" >忘記密碼？</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" >手機號登錄</a></span>
<p class="other">其他登錄方式</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="請輸入注冊賬號" class="ruser">
<p class="rpzh">請輸入賬號</p>
<br>
<input type="password" placeholder="請輸入密碼" class="rpwd">
<p class="rpmm">請輸入密碼</p><br>
<input type="number" class="rphone" placeholder="短信驗證碼">
<p class="rpyzm">請輸入驗證碼</p><br>
<input type="checkbox" class="checks">
<span>已閱讀并同意小米賬號</span>
<span>用戶協(xié)議</span>
<span>和</span>
<span>隱私政策</span><br>
<button>登錄</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" >忘記密碼？</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" >手機號登錄</a></span>
<p class="other">其他登錄方式</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">小米公司版權(quán)所有-京ICP備10046444-京公網(wǎng)安備11010802020134號</p>
</div>
?
整個登錄注冊分為上下兩個盒子：
上面的盒子裝登錄和注冊兩個文字盒子，作為JS的點擊滑動按鈕
下面的盒子使用小li分別裝登錄和注冊兩個盒子，然后讓小li浮動起來，讓登錄注冊兩個盒子浮動在一行，然后給contentrightbottombox這個大盒子添加overfl:hidden屬性，超出的隱藏起來之后我們就可以寫JS功能代碼了
JS功能1
點擊登錄注冊進行切換
在css里面我們通過小li的浮動將登錄和注冊的盒子浮動在一排
當(dāng)我們點擊注冊按鈕的時候只需要讓包裹小li的ul移動到注冊盒子上面即可
當(dāng)我們點擊登錄按鈕的時候也只需要讓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盒子里面的文字縮小并往上移動
在小米官網(wǎng)的登錄里面，它是使用lable標(biāo)簽來實現(xiàn)，我是直接給input里面的placeholder添加樣式來實現(xiàn)
修改placeholder的樣式我們是通過偽類的方式實現(xiàn)，并且給它定位讓它縮小后移動到要求的位置，并且加上了過渡，看起來好看一點點
代碼如下：
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標(biāo)簽(其他標(biāo)簽也可以)，在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變量來控制開關(guān)圖片的切換和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;
}
});
到此這篇關(guān)于JavaScript仿小米官網(wǎng)注冊登錄功能的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 的內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
npm install 、npm install --save 和&n
這篇文章主要介紹了npm install 、npm install --save 和 npm install --save-dev的區(qū)別介紹,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
TypeScript 中的 .d.ts 文件詳解(加強類型支持提升開發(fā)效率)
.d.ts 文件在 TypeScript 開發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強大的類型系統(tǒng)帶來的優(yōu)勢,提高代碼質(zhì)量和開發(fā)效率,接下來,我們將深入探討如何為 JavaScript 庫和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實踐和注意事項,一起看看吧2023-09-09
ASP中進行HTML數(shù)據(jù)及JS數(shù)據(jù)編碼函數(shù)
在有些時候我們無法控制亂碼的出現(xiàn), 比如發(fā)送郵件的時候有些郵件顯示亂碼, 比如Ajax返回數(shù)據(jù)總是亂碼. 怎么辦?2009-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)頁面跳轉(zhuǎn)并傳值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了Js代碼中的span拼接問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Javascript的無new構(gòu)建實例詳解的相關(guān)資料，小編感覺介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JS中call apply bind函數(shù)手寫實現(xiàn)demo
這篇文章主要為大家介紹了JS中call apply bind函數(shù)手寫實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
腳本使用了WScript.Shell和Scripting.FileSystemObject的組件，所以必須要在IE下面和打開安全選項中運行； 另外還用到了Jquery. 代碼只是客戶端代碼， 至于服務(wù)器的接收代碼網(wǎng)上好多了2010-12-12
這篇文章主要介紹了Javascript原型鏈及instanceof原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
PHP配置文件php.ini中打開錯誤報告的設(shè)置方法
這篇文章主要介紹了PHP配置文件php.ini中打開錯誤報告的設(shè)置方法,需要的朋友可以參考下2015-01-01