【JavaScript】滑块验证码
【摘要】
author：咔咔
wechat：fangkangfk
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑块验证解锁</title> <...
author：咔咔
wechat：fangkangfk
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>滑块验证解锁</title>
-
<style>
-
.drag{
-
width: 300px;
-
height: 40px;
-
line-height: 40px;
-
background-color: #e8e8e8;
-
position: relative;
-
margin:0 auto;
-
}
-
.bg{
-
width:40px;
-
height: 100%;
-
position: absolute;
-
background-color: #75CDF9;
-
}
-
.text{
-
position: absolute;
-
width: 100%;
-
height: 100%;
-
text-align: center;
-
user-select: none;
-
}
-
.btn{
-
width:40px;
-
height: 38px;
-
position: absolute;
-
border:1px solid #ccc;
-
cursor: move;
-
font-family: "宋体";
-
text-align: center;
-
background-color: #fff;
-
user-select: none;
-
color:#666;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="drag">
-
<div class="bg"></div>
-
<div class="text" onselectstart="return false;">请拖动滑块解锁</div>
-
<div class="btn">>></div>
-
</div>
-
<script>
-
//一、定义一个获取DOM元素的方法
-
var $ = function(selector){
-
return document.querySelector(selector);
-
},
-
box = $(".drag"),//容器
-
bg = $(".bg"),//背景
-
text = $(".text"),//文字
-
btn = $(".btn"),//滑块
-
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(){
-
alert('解锁成功！');
-
},100);
-
}
-
}
-
-
//四、给文档注册鼠标松开事件
-
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;
-
}
-
-
-
}
-
</script>
-
</body>
-
</html>
文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/fangkang7/article/details/88640116
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）