Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

まずページレイアウトを構築する必要があります

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="ログイン登録ボックス">
                        <ul>
                            <li>
                                <div class="crbottomcontent">
                                    <input type="text" placeholder="メールアドレス/携帯電話番号/Xiaomi ID" class="user">
                                    <br>
                                    <p class="pzh">アカウント番号を入力してください</p>
                                    <div class="pwdeyebox">
                                        <input type="password" placeholder="password" class="pwd"><br>
                                        <img src="close.png" alt="" class="目">
                                    </div>
                                    <p class="pmm">パスワードを入力してください</p>
                                    <input type="checkbox" class="checks">
                                    <span>Xiaomi アカウントを読み、同意しました</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="SMS認証コード">
                                    <p class="rpyzm">認証コードを入力してください</p><br>
                                    <input type="checkbox" class="checks">
                                    <span>Xiaomi アカウントを読み、同意しました</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">著作権は Xiaomi Corporation が所有 - 北京 ICP 番号 10046444 - 北京公安局番号 11010802020134</p>
            </div>

ログイン登録全体は 2 つのボックスに分かれています。

上のボックスには、ログインと登録の2つのテキストボックスがあり、JSのクリックボタンとスライドボタンとして機能します。

下のボックスは、ログインボックスと登録ボックスをそれぞれ保持するために小さなliを使用し、小さなliをフロートさせて、ログインボックスと登録ボックスが1行にフロートするようにし、次に大きなボックスのcontentrightbottomboxにoverfl:hidden属性を追加します。余分な部分が非表示になったら、JS関数コードを記述できます。

JS関数1

クリックしてログインし、登録して切り替える

CSS では、小さな 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', 関数() {
        boxul.style.transition = 'すべて 0.3 秒';
        boxul.style.transform = 'translateX(-414px)';
        registbtn.style.borderBottom = '4px solid #FF6900';
        loginbtn.style.borderBottom = 'なし';
 
    });
    loginbtn.addEventListener('click', 関数() {
        boxul.style.transition = 'すべて 0.3 秒';
        boxul.style.transform = 'translateX(0px)';
        loginbtn.style.borderBottom = '4px 実線 #FF6900';
        registbtn.style.borderBottom = 'なし';
 
    });

JS関数2

入力ボックス内のテキストをクリックすると縮小され、上に移動します

Xiaomi公式サイトのログインでは、ラベルタグを使用して実装されています。入力内のプレースホルダーに直接スタイルを追加して実装します。

疑似クラスを使用してプレースホルダーのスタイルを変更し、縮小して必要な位置に移動するように配置し、トランジションを追加して見た目を少し良くします。

コードは次のとおりです。

 
    var user = document.querySelector('.user');
    var pwd = document.querySelector('.pwd');
    var pzh = document.querySelector('.pzh');
    var pmm = document.querySelector('.pmm');
 
    user.addEventListener('focus', 関数() {
        user.style.border = '1px 赤';
        user.style.boxShadow = '0 0 1px 2px #FFDECC';
        背景色を '#FCF2F3' に設定します。
        user.style.transition = 'すべて 0.3 秒';
        user.setAttribute('class', 'ユーザー変更1');
 
    });

.change1::プレースホルダー{
 位置: 絶対;
 上: 5px;
 左: 20px;
 フォントサイズ: 12px;
色: #C1C1C1;
遷移: すべて .3;
    
}
.change2::プレースホルダー{
   フォントサイズ: 17px;
       色: 赤;
       遷移: すべて .3;
   }

JS関数3

「アカウント番号を入力してください」というプロンプトが表示されます

HTMLにpタグを追加し（他のタグでもOK）、CSSでスタイルを変更し、非表示にする表示スタイルを指定します。

js でフォーカスを失ったときに、テキストボックスに値があるかどうかを判断します。値がある場合は非表示にし、ない場合は表示します。

コードは次のとおりです。

user.addEventListener('blur', 関数() {
 
        user.style.border = 'なし';
        user.style.boxShadow = 'なし';
        user.style.transition = 'すべて .3';
        if (user.value == '') {
            pzh.style.display = 'ブロック';
            背景色を '#FCF2F3' に設定します。
            user.setAttribute('class', 'ユーザー変更2');
        } それ以外 {
            pzh.style.display = 'なし';
            背景色を#F9F9F9に設定します。
            ユーザースタイルフォントサイズ = '17px';
 
            user.setAttribute('class', 'ユーザー変更1');
        }
    });

.rpzh、.rpmm、.rpyzm{
    表示: なし;
    色: 赤;
    フォントサイズ: 12px;
    上マージン: 10px;
    左マージン: 40px;
    下マージン: -30px;
}

JS関数4

パスワードを表示、パスワードを非表示

スイッチ画像の切り替えと入力のtype属性の値を制御するフラグ変数を定義します。

  varフラグ = 0;
    eyes.addEventListener('click', 関数() {
        フラグが0の場合
            pwd.type = 'テキスト';
            目.src = 'open.png';
            フラグ = 1;
        }
        それ以外 {
            pwd.type = 'パスワード';
            目を閉じる
            フラグ = 0;
        }
    });

Xiaomi公式サイトの登録・ログイン機能をJavaScriptで実装する方法についての記事はこれで終わりです。より関連性の高いJavaScriptコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: