实现简单的滑块验证代码案例

html部分代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/validate_drge.css">
</head>
<body><div><!-- 滑块  --><div id="dragContainer"> <!-- 容器初始背景 --><div id="dragBg"></div><!-- 绿色背景 --><div id="dragText"></div><!-- 滑块容器文字 --><div id="dragHandler" class="dragHandlerBg"></div></div>  <!-- 滑块  滑块初始化背景--></div><script src="./js/validate_drge.js"></script>
</body>
</html>

css部分代码


/* 滑块 控件 容器 ,灰色背景 */
#dragContainer{position: relative;display: inline-block;background: #e8e8e8;width: 300px;height: 33px;border: 2px solid #e8e8e8;
}/* 滑块左边部分,绿色背景 */
#dragBg{    /* 绝对定位 */position: absolute;background-color: #7ac23c;width: 0px;height: 100%;
}
/* 滑块验证容器文字 */
#dragText{position: absolute;width: 100%;height: 100%;/* 文字居中 */text-align: center;/* 文字进行垂直居中 这个地方不建议百分比  因为百分比他相对原始尺寸line-height 而非div的高度 *//* list-style: 33px; */line-height: 33px;/* 文字不允许选中 */user-select: none;-webkit-user-select: none;
}
/* 滑块 */
#dragHandler{position: absolute;width: 40px;height: 100%;cursor: move;
}
/* 滑块初始化背景 */
.dragHandlerBg{background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") ;
}/* 滑块成功时的背景 带一个对号 */
.dragHandlerOkBg{background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") ;
}

js部分代码


// 加载 (时间会在页面加载完成后触发)
window.onload = function () {(function () {// 获取滑动控件容器 ,灰色背景var dragContainer = document.getElementById("dragContainer");// 获取滑块左边部分,绿色背景var dragBg = document.getElementById("dragBg");// 获取滑动验证容器文本var dragText = document.getElementById("dragText");//获取滑块var dragHandler = document.getElementById("dragHandler");// 滑块的最大偏移量  =  滑块验证容器文本长度  -  滑块长度var maxHandleOffset = dragContainer.clientWidth -  dragHandler.clientWidth;// 是否验证成功的标记var isVertifySucc = false;initDrag();function initDrag(){// 在滑动验证容器文本中写入  “拖动滑块验证”dragText.textContent = "拖动滑块验证";// 给滑块添加鼠标按下监听dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);}// 选中滑块function onDragHandlerMouseDown(){// 鼠标移动监听document.addEventListener("mousemove", onDragHandlerMouseMove);// 鼠标松开监听document.addEventListener("mouseup", onDragHandlerMouseUp);}//滑块移动function onDragHandlerMouseMove (){// html 不存在width属性  只有clientWidth// offsetX 是相对当前元素  clientX 和  PageX是相对于其父元素的// 滑块移动量var left = event.clientX - dragHandler.clientWidth / 2;// /if(left < 0){left = 0;// 如果 滑块移动量 > 滑块的最大量  ,则调用 验证成功函数}else if(left > maxHandleOffset ){left = maxHandleOffset;}// 滑块移动量dragHandler.style.left = left + "px";// 绿色背景长度dragBg.style.width = dragHandler.style.left;}// 松开滑块函数function onDragHandlerMouseUp () {//移除鼠标移动监听document.removeEventListener("mousemove", onDragHandlerMouseMove);// 移除鼠标松开监听document.removeEventListener("mouseup", onDragHandlerMouseUp);var left = event.clientX - dragHandler.clientWidth / 2;if(left > maxHandleOffset){left = maxHandleOffset;verifySucc();}else{// 初始化滑块移动量dragHandler.style.left = 0;dragBg.style.width = 0;}}function getIsVertifySucc(){return isVertifySucc;}// 验证成功function verifySucc(){// 成功标记 不可回弹isVertifySucc = true;//容器文本的文字改为白色“验证通过”字体dragText.textContent = "验证通过";dragText.style.color = "white";// 验证通过的滑块背景dragHandler.setAttribute("class","dragHandlerOkBg");//移除鼠标按下监听dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);//移除鼠标移动监听document.removeEventListener("mousemove", onDragHandlerMouseMove);// 移除鼠标松开监听document.removeEventListener("mouseup", onDragHandlerMouseUp);// 匹配成功进行跳转// window.location.href="成功页面.html";}// })})()
}

实现简单的滑块验证代码案例相关推荐

今天这教程难度有点高，反爬虫之跳过淘宝滑块验证！爬虫必会教程
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动链接:http://chromedriver.storage.googleapis.com ...
selenium 反爬虫之跳过淘宝滑块验证！首先要搞定JS！
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动驱动地址注意划重点!!一定要做这一步,因为我用的83的chorme他是不行滴,~~~~ ...
selenium 反爬虫之跳过淘宝滑块验证，这个有点难！
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动链接:http://chromedriver.storage.googleapis.com ...
【Python成长之路】破解Boss直聘网站滑块验证
哈喽大家好,我是鹏哥. 今天要记录的内容是 -- 破解Boss直聘网站的滑块验证. -- 上课铃-- TuesdayBurak Yeter;Danelle Sandoval - Tuesday 1 ...
python 淘宝滑块验证_selenium 反爬虫之跳过淘宝滑块验证！首先要搞定JS！
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动注意划重点!!一定要做这一步,因为我用的83的chorme他是不行滴,~~~~~~~ 问 ...
selenium 反爬虫之跳过淘宝滑块验证（2020/8）（转载）
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动链接:http://chromedriver.storage.googleapis.com ...
selenium 反爬虫之跳过淘宝滑块验证（2020/8）
在处理问题的之前,给大家个第一个锦囊! 你需要将chorme更新到最新版版本84,下载对应的chorme驱动链接:http://chromedriver.storage.googleapis.com ...
python五行代码解决滑块验证的缺口距离识别，破解滑块验证...
目前网上关于滑块的缺口识别的方法很多,但是都不极简,看起来繁杂,各种算法的都有,有遍历的有二分法的,今天写个最简单,准确率最高的. 直接看代码: def FindPic(target, templat ...
python五行代码解决滑块验证的缺口距离识别，破解滑块验证
目前网上关于滑块的缺口识别的方法很多,但是都不极简,看起来繁杂,各种算法的都有,有遍历的有二分法的,今天写个最简单,准确率最高的. 直接看代码: def FindPic(target, templat ...
史上最简单的spark教程第二十三章-运行第一个机器学习Java和Python代码案例
[提前声明] 文章由作者:张耀峰结合自己生产中的使用经验整理,最终形成简单易懂的文章写作不易,转载请注明,谢谢! 代码案例地址: ?https://github.com/Mydreamandrea ...

实现简单的滑块验证代码案例

实现简单的滑块验证代码案例相关推荐

最新文章

热门文章