1.html:
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false;">请拖动滑块解锁</div>
<div class="dragBtn">>></div>
</div>
<script>
/* 滑动验证码 */
var successRand = '';
//一、定义一个获取DOM元素的方法
var
box = document.querySelector(".drag"),//容器
bg = document.querySelector(".bg"),//背景
text = document.querySelector(".text"),//文字
btn = document.querySelector(".dragBtn"),//滑块
success = false,//是否通过验证的标志
distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)
//二、给滑块注册鼠标按下事件
btn.onmousedown = function(e){
//1.鼠标按下之前必须清除掉后面设置的过渡属性
btn.style.transition = "";
bg.style.transition ="";
//说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
//2.当滑块位于初始位置时,得到鼠标按下时的水平位置
var e = e || window.event;
var downX = e.clientX;
//三、给文档注册鼠标移动事件
document.onmousemove = function(e){
var e = e || window.event;
//1.获取鼠标移动后的水平位置
var moveX = e.clientX;
//2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
var offsetX = moveX - downX;
//3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
if( offsetX > distance){
offsetX = distance;//如果滑过了终点,就将它停留在终点位置
}else if( offsetX < 0){
offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置
}
//4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px";
//如果鼠标的水平移动距离 = 滑动成功的宽度
if( offsetX == distance){
//1.设置滑动成功后的样式
text.innerHTML = "验证通过";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
//2.设置滑动成功后的状态
success = true;
//成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
btn.onmousedown = null;
document.onmousemove = null;
//3.成功解锁后的回调函数
setTimeout(function(){
successRand = new Date().getTime() + Math.random();
var obj = {};
obj.rand = successRand;
$.ajax({
type: "post",
url: projectName + "/loginC/setRand",
data: JSON.stringify(obj),
datatype: 'json',
contentType: "application/json",
success: function (data) {
//console.log(vm.parent.success);
//console.log(vm.isTest);
if (data.success == true) {
} else {
layer.alert(data.message);
// change_authimage();
}
},
error: function () {
layer.alert("请求失败");
}
});
},1);
}
}
//四、给文档注册鼠标松开事件
document.onmouseup = function(e){
//如果鼠标松开时,滑到了终点,则验证通过
if(success){
return;
}else{
//反之,则将滑块复位(设置了1s的属性过渡效果)
btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
}
//只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
document.onmousemove = null;
document.onmouseup = null;
}
}
// 复位验证滑块
function restDragBtn() {
/*btn.style.left = 0;
bg.style.width = 0;
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease";
text.innerHTML = "请拖动滑块解锁";
btn.innerHTML = ">>>";
text.style.color = "#a9a9a9";*/
location.reload();
}
</script>
2.后端:
@RequestMapping(value="/setRand",method = RequestMethod.POST)
@ResponseBody
@ApiOperation(value = "设置验证码成功")
//@ApiImplicitParam(paramType = "query",name= "username" ,value = "用户名",dataType = "string")
/*public void userLogin(@RequestParam(value = "username" , required = false) String username,
@RequestParam(value = "password" , required = false) String password)*/
public Message setRand(@RequestBody JSONObject json,HttpServletRequest request){
Message message = new Message();
String rand = json.getString("rand");
if(StringUtils.isNotBlank(rand)){
// 将认证码存入redis
HttpSession httpSession = request.getSession();
redisUtil.set(httpSession.getId() + ".rand",rand);
redisUtil.expire(httpSession.getId() + ".rand",60);
message.setSuccess(true);
}else{
message.setMessage("发生异常,请刷新重试");
}
return message;
}
3.登录验证时:
// 验证验证码
String randInput = json.getString("rand");
String rand = (String) redisUtil.get(httpSession.getId() + ".rand");
if(randInput==null||!randInput.equals(rand)) {
message.setMessage("验证码验证失败");
// 清空验证码
redisUtil.set(httpSession.getId() + ".rand","");
return message;
}