JavaScript仿小米官網(wǎng)注冊(cè)登錄功能的實(shí)現(xiàn)

更新時(shí)間：2021年11月23日 09:58:58 作者：愛做夢(mèng)的沙丁魚

這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript實(shí)現(xiàn)仿小米官網(wǎng)登錄注冊(cè)完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

首先我們需要搭建好頁面布局

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" >注冊(cè)</a></div>
                    </div>
                    <div class="loginregistbox">
                        <ul>
                            <li>
                                <div class="crbottomcontent">
                                    <input type="text" placeholder="郵箱/手機(jī)號(hào)碼/小米ID" class="user">
                                    <br>
                                    <p class="pzh">請(qǐng)輸入賬號(hào)</p>
                                    <div class="pwdeyebox">
                                        <input type="password" placeholder="密碼" class="pwd"><br>
                                        <img src="close.png" alt="" class="eye">
                                    </div>
                                    <p class="pmm">請(qǐng)輸入密碼</p>
                                    <input type="checkbox" class="checks">
                                    <span>已閱讀并同意小米賬號(hào)</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" >手機(jī)號(hào)登錄</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="請(qǐng)輸入注冊(cè)賬號(hào)" class="ruser">
                                    <p class="rpzh">請(qǐng)輸入賬號(hào)</p>
                                    <br>
                                    <input type="password" placeholder="請(qǐng)輸入密碼" class="rpwd">
                                    <p class="rpmm">請(qǐng)輸入密碼</p><br>
                                    <input type="number" class="rphone" placeholder="短信驗(yàn)證碼">
                                    <p class="rpyzm">請(qǐng)輸入驗(yàn)證碼</p><br>
                                    <input type="checkbox" class="checks">
                                    <span>已閱讀并同意小米賬號(hào)</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" >手機(jī)號(hào)登錄</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號(hào)</p>
            </div>
 
?

整個(gè)登錄注冊(cè)分為上下兩個(gè)盒子：

上面的盒子裝登錄和注冊(cè)兩個(gè)文字盒子，作為JS的點(diǎn)擊滑動(dòng)按鈕

下面的盒子使用小li分別裝登錄和注冊(cè)兩個(gè)盒子，然后讓小li浮動(dòng)起來，讓登錄注冊(cè)兩個(gè)盒子浮動(dòng)在一行，然后給contentrightbottombox這個(gè)大盒子添加overfl:hidden屬性，超出的隱藏起來之后我們就可以寫JS功能代碼了

JS功能1

點(diǎn)擊登錄注冊(cè)進(jìn)行切換

在css里面我們通過小li的浮動(dòng)將登錄和注冊(cè)的盒子浮動(dòng)在一排

當(dāng)我們點(diǎn)擊注冊(cè)按鈕的時(shí)候只需要讓包裹小li的ul移動(dòng)到注冊(cè)盒子上面即可

當(dāng)我們點(diǎn)擊登錄按鈕的時(shí)候也只需要讓ul移動(dòng)到登錄的盒子上面

代碼如下：

  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

點(diǎn)擊input盒子里面的文字縮小并往上移動(dòng)

在小米官網(wǎng)的登錄里面，它是使用lable標(biāo)簽來實(shí)現(xiàn)，我是直接給input里面的placeholder添加樣式來實(shí)現(xiàn)

修改placeholder的樣式我們是通過偽類的方式實(shí)現(xiàn)，并且給它定位讓它縮小后移動(dòng)到要求的位置，并且加上了過渡，看起來好看一點(diǎn)點(diǎ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

跳出提示"請(qǐng)輸入賬號(hào)"

在html添加一個(gè)p標(biāo)簽(其他標(biāo)簽也可以)，在css里面修改他的樣式并給它display樣式讓他隱藏起來

在js里面失去焦點(diǎn)的時(shí)候判斷文本框里面是否有值，有值就讓他隱藏，否則就顯示

代碼如下：

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

顯示密碼和隱藏密碼

定義一個(gè)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)注冊(cè)登錄功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 的內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: