浅析小米登录/注册页面（原生）

前言

本篇主要介绍小米注册登录页面的一些js布局和书写，将整体的html布局发出来是方便大家对照类名和css。希望可以得到大家的意见，共同勉励。

---

一、登录/注册页面布局

整体HTML布局：

           
            

                

                
扫描登录
                

                    登录
                    注册
                
                

                    
                    

                        

                            邮箱/手机号码/小米ID
                            
                            
请输入账号
                        
                        

                            密码
                            
                            
请输入登录密码
                            

                        
                        

                            
                            
                            已阅读并同意小米帐号 用户协议 和 隐私政策
                        
                        

                            
                            请你同意用户条款
                        
                        

                            登录
                        
                        

                            忘记密码？
                            手机号登录
                        
                        

                            
其他方式登录
                            
                            
                            
                            
                        
                    
                    
                    

                        

                            

                                国家/地区
                            
                            
                            
                            
请选择国家/地区
                        
                        

                            

                                
国家码
                                
+86
                                
                            
                            手机号
                            
                            
请输入手机号码
                        
                        

                            请输入验证码
                            
                            
请输入短信验证码
                            
获取验证码
                        
                        

                            
                            
                            已阅读并同意小米帐号 用户协议 和 隐私政策
                        
                        

                            
                            请你同意用户条款
                        
                        

                            注册
                        
                        

                            收不到验证码？
                        
                        

                            
其他方式登录
                            
                            
                            
                            
                        
                    
                
            
            
            

                

                
密码登录
                
扫码登陆 安全快捷
                
                
请使用小米手机/米家等小米旗下APP扫码登录
                    

                        
                            
                        

                            
常用答疑
                            
1.如何用小米手机扫一扫？
                            
答：点击小米手机 - 设置 - 帐号头像 - 右上角扫一扫。
                            
2.小米旗下哪些App支持扫码登录？
                            
答：目前包含米家、小米商城、小爱音箱。
                            
3.其他登录方式？
                            
答：可以使用微信/微博/QQ客户端扫码授权登录。
                        
                    
                
                

                    
支持扫描登录的App
                    米家
                    小米商城
                    小爱音箱
                
            

            

                小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
            

整体效果图：

 除去一些基本布局外，比较复杂的就剩下中间的表单模块，接下来我就给大家解析一下我的整个表单模块的布局和制作。

二、表单模块

1.整体表单

效果图：

 

公共模块：本应该公共模块是头和底两个模块的，开始布局时没注意就只写了头做公共模块

2.分块解析

右上角二维码：主要是两个事件一个是鼠标进入背景颜色变化、扫描登录模块显示，鼠标移出隐藏，背景颜色恢复。点击隐藏当前表单显示另一个表单

html：

二维码：

 

                
扫描登录

账号密码： 

 

                
密码登录

css：

.menu .erweima,
.scan .pc {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    background-color: #ffbe99;
    border-radius: 7px;
    text-align: center;
    font-size: 40px;
    line-height: 64px;
    color: #fff;
    cursor: pointer;
    transition: all .3s;
}

.scan .pc {
    line-height: 55px;
}

.menu .erweima::after,
.scan .pc::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-width: 32px;
    border-color: transparent transparent #fff #fff;
    border-style: solid;
}

.scan {
    display: none;
}

js：

二维码：

 var scan = document.querySelector('.scan');
    var menu = document.querySelector('.menu');
    var erweima = document.querySelector('.erweima');
    var login_prompt = document.querySelector('.login_prompt');
    erweima.addEventListener('mouseenter', function() {
        erweima.style.backgroundColor = '#ff6900';
        login_prompt.style.transform = 'scale(' + 1 + ')';
    });
    erweima.addEventListener('mouseleave', function() {
        erweima.style.backgroundColor = '#ffbe99';
        login_prompt.style.transform = 'scale(' + 0 + ')';
    });
    erweima.addEventListener('click', function() {
        menu.style.display = 'none';
        scan.style.display = 'block';
    });

账号密码：

    var pc = document.querySelector('.pc');
    var scan_prompt = document.querySelector('.scan_prompt');
    pc.addEventListener('mouseenter', function() {
        pc.style.backgroundColor = '#ff6900';
        scan_prompt.style.transform = 'scale(' + 1 + ')';
    });
    pc.addEventListener('mouseleave', function() {
        pc.style.backgroundColor = '#ffbe99';
        scan_prompt.style.transform = 'scale(' + 0 + ')';
    });
    pc.addEventListener('click', function() {
        menu.style.display = 'block';
        scan.style.display = 'none';
    });

效果图：

 

 

 整体的切换：

html和css就不做展示了，思路就是将两个模块用一个大盒子整体装起来，点击登录或者注册对大盒子进行移动

js：

 var menu = document.querySelector('.menu');
    var menuWidth = menu.offsetWidth;

    for (var i = 0; i < login_hd_a.length; i++) {
        login_hd_a[i].setAttribute('index', i);
        login_hd_a[i].addEventListener('click', function() {
            var index = this.getAttribute('index');
            for (var i = 0; i < login_hd_a.length; i++) {
                login_hd_a[i].className = '';
            }
            this.className = 'current';
            box.style.transform = 'translateX(' + index * -menuWidth + 'px)';
        });
    }

效果图：

从首页点击登录或者注册跳转到登录注册页面相应的模块： 

html：简单解释，？代表一种条件。一个接口。后面是种数据，这个数据要传输到这个网页中。
          网页根据问号后面的条件中的数据来调取相应的网页。

登录
注册

js：

 var temp = location.href;
    var num = temp.indexOf('?') + 1;
    if (temp.charAt(num) == 'l') {
        login_hd_a[1].className = '';
        login_hd_a[0].className = 'current';
        box.style.transform = 'translateX(' + 0 + 'px)';
    }
    if (temp.charAt(num) == 'e') {
        login_hd_a[0].className = '';
        login_hd_a[1].className = 'current';
        box.style.transform = 'translateX(' + -450 + 'px)';
    }

知识补充：location.href 是获取当前页面地址

                    indexOf（）是获取根据字符获取字符串中第一个该字符的索引号

                    charAt（）是根据索引号获取字符串中该索引号的字符

---

 

 

总结

主要介绍了注册页面的整体布局的内容