如何用JavaScript编写实现拖动滑块的验证功能？

本文共计1245个文字，预计阅读时间需要5分钟。

使用该验证方法的目的是：证明当前用户不是机器人，防止恶意操作。实现思路：

1.获取滑块（获取元素）；

2.为元素注册鼠标点击事件（onmousedown）；

3.鼠标点击后，获取当前鼠标位置。

使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。

实现思路：

1、获取silde滑块（获取元素）

2、为元素注册事件———鼠标点击事件（onmousedown）鼠标点击之后获得当前鼠标的X坐标。

3、如何获取到鼠标的x坐标——使用clientX事件（当事件被触发时，鼠标指针的水平坐标）。

4、鼠标移动事件发生后根据从最开始点击的X值到移动后的X值之差，作为滑块移动的差值———— 鼠标移动事件 （onmousemove）；

5、获取鼠标移动之后的X坐标

6、获得初始X坐标和移动后X值

7、该变 left的值

8、绿色背景跟着小滑块走

9、鼠标抬起清除鼠标移动事件。

注意：哪怕鼠标移动的时候超出了最外面的方块区域，滑块也要可以移动。所以不能只在滑块上设置移动事件，需要在文档document上设置移动事件。