晃动提示效果
登录验证流程及左右晃动效果
业务场景
一般网站的登录页面或者注册页面,都要求对用户输入的信息进行验证,验证通过后将数据异步发送至后台,验证不通过时给出提示信息。
常见的做法,在点击提交按钮时检查用户填写的所有信息,一旦发现错误,执行提示函数给出提示信息,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); }