拖动图标验证方法

以前我们学了生成字母数字图片验证码,下面我教大家一个拖动图标验证的方法,我们先来看一下代码,如下图。
在这里插入图片描述
在这里插入图片描述

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

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

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

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值