原生js实现拖动滑块验证题
前言
验证的目的是为了减轻超高数据量的访问时，服务器的压力，减少同时请求量；前端基本都不能避免与验证打交道，这里记录一下我对于滑块验证的学习过程。
思路
作为前端，我们要将自己带入用户的角度，对用户的操作习惯进行考虑，我将拖动滑块验证功能归纳为：三个事件、验证成功、验证失败。
按住滑块才能开始拖动(按下、移动、松开事件)
验证成功后不能再拖动(跳转页面或禁用)
验证失败时，滑块回归原始位置(拖动到一半松开)
代码结构
HTML结构：box -> 滑块+文字+背景
滑块移动思路
box position：relative
滑块 position：absolute
拖动滑块，让滑块的绝对定位left随鼠标坐标而改变，造成移动效果
通过evevt事件可以获取到当前X轴和Y轴坐标，event.clientX;clientY
event.clientX;clientY 是从屏幕左上角开始的坐标
滑块移动距离(left) = 用移动时鼠标的坐标 - 最开始鼠标按下的坐标
clipboard.png
控制滑块移动的范围，不超出box
(moveX >= 0 && moveX <= (boxWidth - btnWidth)
btn.style.left = (boxWidth - btnWidth) + 'px'
滑块可移动的范围moveX如图所示，在0到(box的宽度 - 滑块的宽度)之间
clipboard2.png
滑动途中，背景的宽度改变
背景的宽度与滑块可移动范围moveX相同
bg.style.width = (boxWidth - btnWidth) + 'px'
滑动到尾部时要文字替换+事件清除(按下、移动、松开)
鼠标松开，滑块回到原点，清除移动事件(不清除按下事件，否则之后不能按下)
最后上代码
HTML
>>
拖动滑块验证
CSS
* {
margin: 0;
padding: 0;
background-color: #ffffff;
}
.box {
width: 500px;
height: 60px;
position: relative;
left: 50%;
margin-left: -250px;
margin-top: 50px;
background: #eae4e4;
display: flex;
align-items: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.btn {
height: 100%;
width: 60px;
background: #fbf5f5;
box-sizing: border-box;
border: 2px solid #cecaca;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: #d5d4d4;
z-index: 999;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.btn:hover {
cursor:pointer;
}
.text {
font-size: 20px;
position: absolute;
left: 50%;
margin-left: -60px;
background-color: transparent;
z-index: 2;
}
.bg {
height: 100%;
position: absolute;
background-color: #4cbb42;
z-index: 1;
}
JS
window.onload = function () {
// 封装-选择器,内部可以做兼容性
function querySelect(name) {
return document.querySelector(name)
}
// 验证成功
// 验证失败
// 触发事件 onmousedown按下 onmousemove移动 onmouseup松开
let btn = querySelect('.btn') // 滑块 对IE6/7 有兼容性问题
let box = querySelect('.box') // box
let text = querySelect('.text') // 文字
let bg = querySelect('.bg') // 背景
btn.onmousedown = (eventDown) => {
// event.clientX;clientY 鼠标当前X轴Y轴坐标
let downX = eventDown.clientX
console.log(downX)
document.onmousemove = (eventMove) => {
// 移动的X坐标 - 按下的X坐标
let moveX = eventMove.clientX - downX
let boxWidth = box.offsetWidth
let btnWidth = btn.offsetWidth
if (moveX >= 0 && moveX <= (boxWidth - btnWidth)) { // 可移动的范围
btn.style.left = moveX + 'px' // 滑块绝对定位
bg.style.width = moveX + 'px' // 设备背景的宽度
}
if (moveX >= (boxWidth - btnWidth)) {
btn.style.left = (boxWidth - btnWidth) + 'px' // 滑块绝对定位
bg.style.width = (boxWidth - btnWidth) + 'px' // 设备背景的宽度
// 文字提醒
text.innerText = '验证成功'
text.style.color = '#fff'
// 事件清除-按下、移动
btn.onmousedown = null
document.onmousemove = null
btn.onmouseup = null
}
}
}
btn.onmouseup = (eventUp) => {
// 松开后回到原点
// 清除移动事件
btn.style.left = 0 + 'px'
bg.style.width = 0 + 'px'
document.onmousemove = null
}
}
