晃动提示效果

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

业务场景

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

常见的做法,在点击提交按钮时检查用户填写的所有信息,一旦发现错误,执行提示函数给出提示信息,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);
        
    }

 

posted @ 2016-05-26 14:36  不忘初心~  阅读(383)  评论(0编辑  收藏  举报