php拖动滑块验证原理,原生js实现拖动滑块验证

原生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.lef