拖动图标验证方法

Posted 2022-11-30 埋年

以前我们学了生成字母数字图片验证码，下面我教大家一个拖动图标验证的方法，我们先来看一下代码，如下图。

Random()获取0到1的随机数

Math：执行普通的算数问题。

floor() 方法可对一个数进行下舍入。

我们先随机给与两张图片的高度，然后通过ID选择器获取到ID数据，然后获取到需要移动图片的随机数，再固定图片的随机数，最后调整随机位置。

然后就是鼠标拖动图片的计算了，因为相关解释我已经在图中注释，所以我就不多说了，代码和解释如下图。

最后我们要判断是否验证成功，允许有一点点误差，首先我们要获取到第一张和第二张图片的ID，然后通过这个ID获取到它们在那个盒子里面的top值和left值，这里要提示一下，因为我在装这俩张图片的盒子里使用了相对定位，图片使用了绝对定位，所以才有top值和left值，获取到值，我们要使用一个for循环，通过判断第一张图片的top值加i或减去i能不能等于第二张图的top值，left也一样，如果等于则验证成功。