验证码--拖动验证

最新推荐文章于 2023-07-18 11:08:42 发布

原创

最新推荐文章于 2023-07-18 11:08:42 发布 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了拖动验证码的实现方式，主要用于用户验证，防止恶意自动化操作。验证码通过设置两个图片，让用户将一张图片拖动到指定位置。文章详细讲解了如何随机设置图片初始位置、监听鼠标事件实现拖动效果，以及验证拖动成功的判断逻辑和用时评价标准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：Visual Studio 2015  JavaScript
作者：宁佐潮
撰写时间：2019.3.31

在上网的时候，大多数网站，App都有着登陆注册的功能，而在注册或者登陆，往往需要验证，验证码一般是防止恶意破解密码、刷票、论坛灌水、刷页、自动程序来不停的注册，主要用来区分用户是计算机还是人，下面我将用拖动验证在这里插入图片描述

主要说的是验证这部分，布局是一个div的盒子，再是两张图片，一张为左边需要拖动的美国队长的小盾牌，右边是需要移动到的位置在这里插入图片描述

在这里插入图片描述
接下来便是初始给左右两张图片随机的一个位置

img1为左边需要移动图片，img2为右边固定位置的图片，ran1-4是4 个限定范围的随机数，最后再给两张图片设置top值和left值，这样两张图片的位置便是随机的了，刷新页面或登陆失败就调用此方法，有了随机的位置后便是用户来进行拖动验证在这里插入图片描述

鼠标拖动元素在前面写的文章中有详细解说，不了解可以前往查看
onmousedown鼠标按下时计算img1图片的边距，Time1获取按下时的系统时间
onmousemove鼠标移动时不停的赋值给图片，达到移动的效果，
onmouseup鼠标抬起时进行判断
拖动之后便是判断，一个是Pass判断是否验证成功，允许有一点误差，
另一个是Surpass根据用时判断超越用户的百分比在这里插入图片描述

判断是否成功，是根据两张图片的top值和left值进行判断，当img1和img2两张图片的值，相差不超过5的时候，便判断验证通过，这里我用for循环，然后里面用if进行判断，在1-5的误差下，相等便设置Strmsg值为true,然后直接break;否则Strmsg值为false；
Surpass是根据用时判断超越用户的百分比，需要传参，参数便是Time3，Time1是在鼠标按下时的系统时间，Time2是鼠标松开时的系统时间，然后用其相减后再除以1000，得到用时，传到Surpass后进行判断
在这里插入图片描述
根据时间设置全局变量，最