纯HTML+CSS+js实现大型企业站小米商城官网之注册页面

实现效果：点击登录页面，输入国家/地区，以及手机号码进行注册，点击立即注册之后随机生成一个四位数验证码输出到控制台，获取生成的验证码通过判断正确之后即注册成功，数据保存到本地浏览器中

实现思路：

1、对立即注册按钮设置一个点击事件，在点击事件内部判断手机号如果符合条件，则显示下一个获取验证码的页面

2、通过setInterval设置验证码倒计时（60）秒，定义一个随机生成四位数的函数方法

3、对下一步按钮设置点击事件，获取到刚刚保存在本地浏览器的验证码并进行判断

4、设置密码

5、如果两次输入的密码正确，则跳转到首页并显示已登录，将数据保存到本地浏览器中

源代码：

HTML部分

        

            
        
        
注册小米帐号
        
        

            
国家/地区
            
            
成功注册帐号后，国家/地区将不能被修改
            
手机号码
            

                
            
            
            
            


            
        
        
        

            

                
我们已经发送一条验证短信至+86 13660354891
                
请输入短信中的验证码
                

                    
                    重新发送
                
                

                   !请输入短信验证码
                
                

                    收不到验证码？
                
                
                
            
        
        
        

            

                
您注册的手机号码为：00000000000
                
请设置您的密码：
                
                
请再次输入密码
                
                

                   错误信息提示
                
                
密码长度8~16位,数字、字母、字符至少包含两种
                
            
        
        
        

            

                
您的小米ID：00000000
                
            
        
    

js部分：

       var xiaomi = {
    start(){
        this.register();
    },
    // 立即注册
    register(){
        let btn = document.getElementById('btn');
        let error = document.getElementsByClassName('err_tip')[0];
        let text = document.getElementById('text');
        btn.onclick = function() {
            if (text.value) {
                if (/^1[3-9]\d{9}$/.test(text.value)) {
                    sessionStorage.setItem("phone", text.value);
                    document.getElementsByClassName('regbox')[0].style.display = 'none';
                    document.getElementsByClassName('regboxTwo')[0].style.display = 'block';
                    xiaomi.verification();
                }
                else {
                    error.style.display = 'block';
                    error.innerHTML = '手机号码格式不正确';
				}
            }else {
                error.style.display = 'block';
                error.innerHTML = '请输入手机号码';
			}
        }
        text.onclick = function() {
			error.style.display = 'none';
		}
    },

    //验证码验证
    verification(){
        let phone = sessionStorage.getItem("phone");
        //设置电话号码
        document.getElementsByClassName('address-place')[0].innerHTML = '+'+ 86 + " " + phone;

        let resendBtn = document.getElementsByClassName('resend')[0];
        let inputcodeTxt = document.getElementsByClassName('inputcode_txt')[0];
        let submitStep = document.getElementsByClassName('submit-step')[1];
        let backStep = document.getElementsByClassName('back-step')[0];
        let error = document.getElementsByClassName('err_tip')[1];

        // 设置获取验证码倒计时
        resendBtn.innerHTML = "重新发送(60)";

        function timer() {
			let timeSet = 60;
			resendBtn.disabled = 'disabled';
			let time = setInterval(function() {
				timeSet--;
				resendBtn.innerHTML = "重新发送(" + timeSet + ")";
				if (timeSet == 0) {
					clearInterval(time);
					resendBtn.innerHTML = "重新发送";
					resendBtn.disabled = false;
				}
			}, 1000);
        }
        timer();

        resendBtn.onclick = function() {
			timer();
        }
        
        // 随机生成四位数
		function numBer() {
			let num = '';
			for (let i = 0; i < 4; i++) {
				num += parseInt((Math.random() * 10));
			}
			console.log(num);
			return num;
		}
        let num = numBer();

        // 下一步
        submitStep.onclick = function(){
            if(inputcodeTxt.value){
                if(inputcodeTxt.value == num){
                    document.getElementsByClassName('regboxTwo')[0].style.display = 'none';
                    document.getElementsByClassName('regboxthree')[0].style.display = 'block';
                    xiaomi.regboxthree();
                }else{
                    error.style.display = 'block';
                    error.innerHTML = '验证码错误或已过期';
                }
            }else{
                error.style.display = 'block';
            }
        }
        // 返回
		backStep.onclick = function() {
			document.getElementsByClassName('regbox')[0].style.display = 'block';
			document.getElementsByClassName('regboxTwo')[0].style.display = 'none';
		}
    },

    //设置密码
    regboxthree(){
        let phone = sessionStorage.getItem("phone");
        document.getElementsByClassName('address-place')[1].innerHTML = phone;

        let btn = document.getElementsByClassName('submit-step')[2];
        let inputpassword1 = document.getElementsByClassName('inputpassword')[0];
        let inputpassword2 = document.getElementsByClassName('inputpassword')[1];
        let error = document.getElementsByClassName('err_tip')[2];
        let error1 = document.getElementsByClassName('err_tip')[3];

        let password = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![^(0-9a-zA-Z)]+$).{8,16}$/;

        btn.onclick = function(){
            if(inputpassword1.value){
                if(password.test(inputpassword1.value)){
                    if (inputpassword2.value){
                        if(inputpassword1.value==inputpassword2.value){
                            sessionStorage.setItem("pwd", inputpassword1.value);
                            document.getElementsByClassName('regboxthree')[0].style.display = 'none';
                            document.getElementsByClassName('regbox-account')[0].style.display = 'block';
                            xiaomi.login();
                        }else{
                            error1.style.display = 'block';
					        error1.innerHTML = '两次密码不一样';
                        }
                    }else{
                        error1.style.display = 'block';
					    error1.innerHTML = '请再输入一次密码';
                    }
                }else{
                    error.style.display = 'block';
					error.innerHTML = '密码格式不对';
                }
            }else{
                error.style.display = 'block';
                error.innerHTML = '请输入密码';
            }
        }
        inputpassword1.onclick = function(){
            error.style.display = 'none';
			error1.style.display = 'none';
        }
        inputpassword2.onclick = function(){
            error.style.display = 'none';
			error1.style.display = 'none';
        }

    },
    //登录
    login(){
        let btn = document.getElementsByClassName('submit-step')[3];
        let num = '';
        for (let i = 0; i < 7; i++) {
			num += parseInt((Math.random() * 10));
        }
        document.getElementsByClassName('address-place')[2].innerHTML = num;
        sessionStorage.setItem("idaccount", num);

        btn.onclick = function(){
            window.location.href = 'login.html';
        }
    }
    
}

window.onload = function(){
    xiaomi.start();
}

以上，初步能够实现基本登陆效果，不足之处欢迎各位大佬指正~~~       一个不会前端的小白~~