前端使用滑块滑动进行验证的思路

今天研究了一下前端需要注册或者发送验证码之前等这些场景时，往往会用到的一个简单的滑块滑动验证，用于区分是否是真人用户，下面就来简单介绍一下这个思路。

下面就是一个简单的demo：

其中HTML和css样式如下：

<body><!-- 整个大容器，可以忽略，方便定位用 --><div class="container"><!-- 滑块的容器 --><div class="bn-container"></div><!-- 滑动时遮盖的颜色容器 --><div class="coverBG"></div><!-- 提示文本，层级在滑块容器和颜色容器之上 --><div class="tip">滑动以进行验证</div><!-- 滑块 --><div class="slider">>>></div></div>
</body><style>.container {position: relative;width: 350px;height: 200px;border: 1px solid rgb(204, 203, 203);margin: 100px auto;}.bn-container {position: absolute;bottom: 0px;width: 100%;height: 40px;background-color: rgb(218, 214, 214);}.coverBG {position: absolute;left: 2px;bottom: 2px;width: 0px;height: 36px;background-color: rgb(42, 235, 51);}.tip {position: absolute;bottom: 0px;width: 100%;height: 40px;text-align: center;line-height: 40px;/* 文本不允许选中 */user-select: none;-webkit-user-select: none;}.slider {position: absolute;left: 2px;bottom: 2px;width: 45px;height: 36px;text-align: center;line-height: 36px;background-color: #fff;cursor: move;/* 文本不允许选中 */user-select: none;-webkit-user-select: none;}</style>

接下来就是js的实现部分了：

首先我们需要计算出滑块可以滑动的最大距离，这一点非常简单，只需要让滑块容器的宽度减去滑块的宽度就ok了，哦~，同时还需要设置一个变量记录一下初始时鼠标按下的位置，方便后续的计算。

let bnContainer = document.querySelector('.bn-container')
let coverBG = document.querySelector('.coverBG')
let tip = document.querySelector('.tip')
let slider = document.querySelector('.slider')// 获取滑块的最大偏移量
let maxOffset = bnContainer.offsetWidth - slider.offsetWidth;
// 标记是否验证成功
let isSuccess = false;
// 记录鼠标初始按下滑块时的位置
let startX;

之后就需要开始对滑块添加一个鼠标按下的事件，同时需要在按下事件里添加document的移动和松开事件。

注意我们给滑块添加按下事件是需要按下滑块做为触发整个事件，而给document添加移动和松开事件而不是继续给滑块slider添加是为了让滑动时鼠标移出的滑块的范围时也能很好响应，体验较好，不然鼠标一不小心跑出范围了就没法继续滑动，体验极差，还会有一些问题。（大家感兴趣的可以修改监听事件源为slider试一下，用起来很难受。）

  // 开启滑块的鼠标按下监听事件slider.addEventListener('mousedown',mousedownEvent)function mousedownEvent(e) {startX = e.clientX;// 给document绑定移动松开事件可以让滑动过快滑出滑块的范围时也能响应// 开启鼠标移动监听事件document.addEventListener('mousemove',mousemoveEvent)// 开启鼠标松开监听事件document.addEventListener('mouseup',mouseupEvent)}

而在鼠标移动事件里就需要修改滑块和颜色遮罩层的定位里left的偏移值，实现滑动的效果；并且还要对这个变化距离作出限制，防止滑出容器。

对于滑动时不断变化的滑块距离容器左侧changeLeft，因为我们已经在前面记录下了初始按下时距离浏览器左侧的水平位置距离startX，所以直接用滑动时变化的e.clientX一减就计算出来了。

  function mousemoveEvent(e) {// 计算出滑块的左侧不断变化的距离let changeLeft = e.clientX - startX;// console.log(changeLeft);// 对滑块偏移位置进行限制if ( changeLeft < 0) {changeLeft = 0;} if (changeLeft > maxOffset ) {changeLeft = maxOffset;isSuccess = true;// 验证成功的回调successEvent()}// 进行赋值slider.style.left = changeLeft + 'px';coverBG.style.width = changeLeft + 'px';}

只要滑块一移动到末尾，就触发验证成功的回调。对于验证成功后的逻辑，大家就按自己的需求来吧。

  // 成功的函数，在此进行验证成功的逻辑function successEvent() {tip.innerHTML = "验证成功";tip.style.color = 'skyblue';console.log('验证成功');// TODO: 验证成功的逻辑}

当然也有可能一次验证没有成功。而鼠标松开事件里我们就需要查看之前设置的是否成功的标记，没有验证成功就需要让滑块和颜色遮罩回到初始位置。

注意！！！在这里需要移除移动和松开的事件，不然绑定的这两个事件会严重干扰我们的第二次验证。

  function mouseupEvent() {// 松开时没有验证成功，滑块退回起点if (isSuccess == false) {slider.style.left = 0 + 'px';coverBG.style.width = 0 + 'px';}// 同时移除移动和松开的事件，否则会影响二次滑动document.removeEventListener('mousemove', mousemoveEvent);document.removeEventListener('mouseup', mouseupEvent);}

好耶~~~，至此，整个滑块验证的逻辑就讲完啦。感谢大家看到最后（点赞啊靓仔）。如果大家有什么问题或建议，也欢迎踊跃发言~

对于滑动图片进行验证的方式本人也在学习中，待我学会了再来与大家分享哦。

前端使用滑块滑动进行验证的思路相关推荐

vue中纯前端实现滑动图片验证的方式
Hello,大家好呀~ 众所周知,滑动图片验证一直是各类网站登录和注册的一种校验方式,是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式. 一般而言,这种滑动图片验证是可以通过后端配合完 ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
[验证码识别技术]-初级的滑动式验证图片识别
初级的滑动式验证图片识别方案 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中.传统的字符型验证安全性已经名存实亡的情况下,各种新型的验证码如雨后 ...
python模拟哔哩哔哩滑块登入验证
python模拟哔哩哔哩滑块登入验证准备工具 pip3 install PIL pip3 install opencv-python pip3 install numpy 谷歌驱动建议指定清华源下 ...
php画拼图滑动验证,滑动拼图验证
3.逻辑:底部滑块的拖动控制小拼图移动,当其左边距与切割位置x坐标一致,或在一定范围内,即为正确:难点在于切割出来拼图,这一步参考上面链接地址: 5.部分源码如下:/** * @name BlockI ...
qq机器人如何滑动验证码验证TxCaptchaHelper
当我们再运行QQ机器人时出现一下信息,提示需要滑动模块验证: 复制上中的url 在浏览器打开点击开始验证,出现验证图片打开开发者控制台,一般浏览器快捷键为 F12 ,切换到"网络&qu ...
SpringSecurity+JWT实现登陆验证的思路（有一点点源码分析）
看了几个SpringSecurity+JWT的登陆demo,两个demo在一些细节实现上有一些不同,然后对于各个类和接口的关系比较模糊,就决定整理一下思路. 先简单的借用一下一位UP 三更草堂的图了解 ...
JavaWeb实现好友验证的思路
需求分析:大家在一些网站注册账号的时候,有时会忘记密码或者账号被盗,正规的网站都是通过手机发验证码的,这可能要调用第三方来实现.因为我是自己做的小项目,这是想有这么个验证的流程,所以我这里就用好友验证 ...
puppeteer 鼠标定位滑块_监听滑块滑动或滑块随鼠标移动 | JShare
监听滑块滑动或滑块随鼠标移动 | JShare fork from "Column with rotated labels" var data = [29,12,32,28,22, ...

前端使用滑块滑动进行验证的思路

前端使用滑块滑动进行验证的思路相关推荐

最新文章

热门文章