滑块验证码实现及原理

前言

滑块验证码也是生活中常见的，本文会介绍如何实现以及原理。如果对图片验证码感兴趣的话可以查看这篇文章：图片验证码的实现方法

实现

滑块验证码主要用到几个属性:clientX,screenX,pageX,offsetX,如果对此有疑惑可以查看这篇文章：clientX,screenX,pageX,offsetX的区别

代码的解释在注释中已经写的很清楚了，还不了解的欢迎留言。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>滑块验证码</title><style>* {margin: 0px;padding: 0px;font-family: "微软雅黑";}.drag {width: 300px;height: 40px;line-height: 40px;background-color: #e8e8e8;position: relative;margin: 0 auto;}.bg {width: 40px;height: 100%;position: absolute;background-color: #75CDF9;}.text {position: absolute;width: 100%;height: 100%;text-align: center;user-select: none;}.btn {width: 40px;height: 38px;position: absolute;border: 1px solid #ccc;cursor: move;font-family: "宋体";text-align: center;background-color: #fff;user-select: none;color: #666;}</style>
</head><body><div class="drag"><div class="bg"></div><div class="text" onselectstart="return false">请拖动滑块解锁</div><div class="btn">&gt;&gt;</div></div><script>//一、定义一个获取DOM元素的方法var $ = function (selector) {return document.querySelector(selector);},box = $(".drag"),//容器bg = $(".bg"),//背景text = $(".text"),//文字btn = $(".btn"),//滑块success = false,//是否通过验证的标志distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）//二、给滑块注册鼠标按下事件btn.onmousedown = function (e) {//1.鼠标按下之前必须清除掉后面设置的过渡属性btn.style.transition = "";bg.style.transition = "";//说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。//2.当滑块位于初始位置时，得到鼠标按下时的水平位置var e = e || window.event;var downX = e.clientX;//三、给文档注册鼠标移动事件document.onmousemove = function (e) {var e = e || window.event;//是为了更好的兼容IE浏览器和非ie浏览器。在ie浏览器中,window.event是全局变量,在非ie中，就需要自己传入一个参数来获取event啦，所以就有了var e = e||window.event//1.获取鼠标移动后的水平位置var moveX = e.clientX;//2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）var offsetX = moveX - downX;//3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系if (offsetX > distance) {offsetX = distance;//如果滑过了终点，就将它停留在终点位置} else if (offsetX < 0) {offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置}//4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度btn.style.left = offsetX + "px";bg.style.width = offsetX + "px";//如果鼠标的水平移动距离 = 滑动成功的宽度if (offsetX == distance) {//1.设置滑动成功后的样式text.innerHTML = "验证通过";text.style.color = "#fff";btn.innerHTML = "&radic;";btn.style.color = "green";bg.style.backgroundColor = "lightgreen";//2.设置滑动成功后的状态success = true;//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）btn.onmousedown = null;document.onmousemove = null;//3.成功解锁后的回调函数setTimeout(function () {alert('解锁成功！');}, 100);}}//四、给文档注册鼠标松开事件document.onmouseup = function (e) {//如果鼠标松开时，滑到了终点，则验证通过if (success) {return;} else {//反之，则将滑块复位（设置了1s的属性过渡效果）btn.style.left = 0;bg.style.width = 0;btn.style.transition = "left 1s ease";bg.style.transition = "width 1s ease";}//只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。document.onmousemove = null;document.onmouseup = null;}}</script>
</body></html>

效果图

滑块验证码实现及原理相关推荐

调用阿里云web API实现滑块验证码
文章目录滑块验证码的实现原理调用阿里云web API实现图形验证码效果演示: 本来想着弄一个算术验证码的,后来发现这玩意儿对我自己也太不友好了
Python破解滑块验证码算法，完美避开人机识别
| 完美是不可能的,加个震惊!Python破解BiliBili滑块验证码,完美避开人机识别,可以有准备工作 B站登录页 https://passport.bilibili.com/login pyt ...
【Lilishop商城】No3-2.模块详细设计，系统设置（系统配置、行政区划、物流公司、滑块验证码图片、敏感词过滤）的详细设计
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括接 ...
阿里旗下，豆瓣等滑块验证码解决问题
几个月前解决过滑块验证码问题,今天再次尝试发现不行了. 问题解决思路(移动距离直接打码平台可以解决,主要研究拖动失败问题): 1.直接用selenium+webdriver,用其自带的Actionch ...
python滑块验证码
前言网上有不少关于滑块验证码的文章,要么就是说了一堆原理断断续续的放一些代码块,要么就是收费!!!都没什么卵用今天给大家分享一篇Python自动验证滑块验证码的操作!,你只需要复制粘贴就行,原理不 ...
对极验geetest滑块验证码图片还原算法的研究
免责声明本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
Python高效实现滑块验证码自动操纵
CDA数据分析师出品作者:CDALevel Ⅰ 持证人岗位:数据分析师行业:大数据众所周知,规范性的网络爬虫可以帮助Decision-maker在低成本下获得想要的信息,不仅如此,做科研.写论文 ...
python手工打码_使用Python + Selenium破解滑块验证码
在前面一篇博客,介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全没有问题了.看了前一篇博客,可能有人会有疑惑,浏览器爬虫的优势感觉并不比传统 ...
极验滑块验证码破解与研究（三）：滑块缺口识别
极验滑块验证码破解与研究(三):滑块缺口识别声明一.环境安装 1. 第三方库安装二.滑块缺口识别 1. 准备工作 2. 工具函数说明 3. 接口识别原理讲解 4. 缺口识别完整代码三.结语 * ...

滑块验证码实现及原理

前言

实现

效果图

滑块验证码实现及原理相关推荐

最新文章

热门文章