前端验证码之-滑动验证码

效果：

 

 原理：
给控件设置一个原始背景色（即解锁前背景颜色），在上面覆盖一层绿色背景色区域（相对于原始背景定位），通过监听鼠标偏移量left来不断的设置绿色区域的宽度，当没有滚动到最大偏移量松开时回到初始位置，达到最大偏移量时表示校验通过（此时改变校验文案及图形）

偏移量left的计算：

最大偏移量maxHandlerOffset：滑动元素宽度-滑块宽度

x: 绿色区域初始位置=this.dragBg?.getBoundingClientRect()?.left

x1: 鼠标移动滑块位置，默认在滑块中间=event.clientX

x2: 滑块位置=x1-滑块宽度一半（event.clientX - this.dragHandler.clientWidth / 2）

left: 最终计算的偏移量=x2-x

left<0时：left初始为0

left>=最大偏移量时：校验成功

 完整代码：