晃动提示效果

登录验证流程及左右晃动效果

业务场景

　　一般网站的登录页面或者注册页面，都要求对用户输入的信息进行验证，验证通过后将数据异步发送至后台，验证不通过时给出提示信息。

常见的做法，在点击提交按钮时检查用户填写的所有信息，一旦发现错误，执行提示函数给出提示信息，return当前流程。

　　为了让提示效果更为友好，我们特意给input框添加一个左右晃动的效果。

案例效果说明

　　当点击登陆按钮时，检查用户名和密码两个input框的value是否为空。为空则左右晃动input框，同时在下面给出对应的提示信息。

如图：

HTML部分

这部分内容包括：一个html表单，两个input框和一用于放置提示文本的div盒子，外加立即登陆按钮。

 

<form action="#">
        <input id="username" type="text" placeholder="请输入用户名">
        <input id="password" type="password" placeholder="登录密码">
        <div class="tipTextBox">
            <p id="tipText"></p>
        </div>
        <button id="loginBtn">立即登陆</button>
    </form>

 

CSS部分

样式代码十分传统，唯一需要注意的地方就是给需要晃动的元素添加 position:relative;属性。晃动实现的原理就是改变对应元素 left值。循环设置为 left: 2px; left: -2px;

JS代码

Javascript代码包含两部分，业务流程和晃动效果、文字提示功能三大部分。

//页面元素获取
var usernameE = document.getElementById('username'),
        passwordE = document.getElementById("password"),
        tipTextE  = document.getElementById("tipText"),
        buttonE   = document.getElementById("loginBtn");

晃动功能函数：errTip

函数就受两个参数，第一个是要执行的晃动的input元素，第二个为可选的回调函数。

函数的具体说明详见注释部分。

//错误提示效果
    function errTip ( ele , callback ){
        var n = 0,                    //晃动次数，初始为0
            moveTime = 600,              //晃动时间
            number = moveTime/30/2,      //晃动是一个开始快，后期慢的过程。晃动次数前半部分快，后半部分慢
            distance = 2;              //晃动距离，默认为2px ，后半部分改为1px;

            //开启循环定时器
        var move = setInterval(function(){
            if(n < number){           //判断是否进入较快的环节
                distance = 2;
            }else{
                distance = 1;
            }

            if(n%2 == 0){             //晃动次数为偶数时left为正值 ，奇数时为负值
                ele.style.left = distance + "px";
            }else{
                ele.style.left = -distance + "px";
            }

            n++;                     //累加晃动次数

        } , 30);

        setTimeout(function(){        //设置延时定时器清除循环定时器
            clearInterval(move);    
            ele.style.left = 0;        //偏移量归0.
        } , moveTime);

        return callback && callback(); //如传入回调，执行回调函数
    }

errTipText函数，

　　传入需要显示的相应文本。提示文本会有一个淡出效果。这个效果的做法即开启一个循环定时器，不断改变p标签的opacity属性。延时定时器用于清除循环定时器，到时间后隐藏p标签，并将p标签的透明度设置为默认状态。

// 错误信息展示
    function errTipText (msg){
        tipTextE.innerHTML = msg;                //设置p标签的内容为传入的信息
        tipText.style.display = "block";        //显示p标签
        var num = 1;                            //p标签初识状态为 opacity属性为1.

            //开启循环定时器不断改变p标签的opacity属性的值，呈现出一个淡出效果
        var time = setInterval(function(){
            tipText.style.opacity = num = num-0.05;
        } , 100);
        
            //设置延时定时器1500ms后清除循环定时器
        setTimeout(function(){
            tipText.style.display = "none";
            clearInterval(time);
            tipText.style.opacity = 1;
        } , 1500);    
    }

整合进登录流程逻辑中

　　

业务流程，在点击登陆按钮时获取相关的信息，进行验证操作，验证通过后执行数据发送操作（这里是弹出用户输入信息），验证不通过时执行晃动函数和提示函数。

buttonE.onclick = function(event){
        event.preventDefault();

        var valueUser = usernameE.value,
            valuePassword = passwordE.value;

        if(!valueUser){
            errTip(usernameE , function(){
                errTipText("没有输入用户名");
            });
            return false;
        }

        if(!valuePassword){
            errTip(passwordE , function(){
                errTipText("没有输入密码");
            });
            return false;
        }
        alert("您的用户名为："+valueUser +" , 您的密码为："+valuePassword);
        
    }