一个简单的滑块拖动验证码实例
使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作。
实现思路:
1、获取silde滑块(获取元素)
2、为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标的X坐标。
3、如何获取到鼠标的x坐标——使用clientX事件(当事件被触发时,鼠标指针的水平坐标)。
4、鼠标移动事件发生后根据从最开始点击的X值到移动后的X值之差,作为滑块移动的差值———— 鼠标移动事件 (onmousemove);
5、获取鼠标移动之后的X坐标
6、获得初始X坐标和移动后X值
7、该变 left的值
8、绿色背景跟着小滑块走
9、鼠标抬起清除鼠标移动事件。
注意:哪怕鼠标移动的时候超出了最外面的方块区域,滑块也要可以移动。所以不能只在滑块上设置移动事件,需要在文档document上设置移动事件。
主要用到的事件:
1、鼠标点击事件onmousedown;
2、鼠标移动事件onmousemove;
3、获取鼠标指针X坐标 clientX;
4、鼠标按键被松开 onmouseup;(有点类似与 click点击)
注意:
1、作用域——— 一个函数拥有一个作用域 (局部作用域)
2、怎样才能实现鼠标移动的时候使滑块也移动:改变滑块的left值。
3、想要实现滑块跟随鼠标移动,就要获得鼠标移动的x坐标。
实现代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; } body{ user-select:none; /*禁止用户选中*/ } .wrap{ width:300px; height: 40px; background-color:#e8e8e8; margin:100px auto; text-align: center; line-height: 40px; /*border-radius: 7px;*/ position:relative; } .rect{ position:relative; width:300px; height:100%; } .rec{ position:absolute; top:0; left:0; width:0; height:100%; background: #00b894; } .silde{ position:absolute; top:0; left:0; z-index: 11; /*在这里面,当设置长宽为40px时在加上边框1px就会超出 40px。 可以使用怪异盒模型,怪异盒模型会使盒子的宽高包括边框,操持40px;*/ box-sizing:border-box; width:40px; height:40px; background: #fff; border:1px solid #ccc; }</style></head><body> <div class='wrap'> <div class='rec'> <div class='rect'>滑块拖拽验证 <div class='silde'><img src="hkkkk.png" alt=""></div> </div> </div> </div> <script> //获取事件 var silde = document.querySelector('.silde'); var rec = document.querySelector('.rec'); var rect= document.querySelector('.rect'); var img= document.querySelector('img'); var minusX; //保存变化的 X坐标(全局变量)//注册事件 silde.onmousedown = function(e) { //鼠标点击事件,点击之后执行函数,获得点击位置的X坐标 var initX = e.clientX; //保存初始按下位置的 X坐标; console.log(11,e); //用以测试 document.onmousemove = function(e) { //鼠标移动事件 var moveX = e.clientX; // var minusX = moveX - initX; //变化的坐标(要注意作用域的问题,在这里面定义变量,在这个函数之外的函数就没法使用,所以要将minusX变成全局变量) minusX = moveX - initX; //这里注意一下,获得的minusX只是一个差值,没有单位想让 滑块的位置改变还需要加上 单位px //这个时候滑块会跟随鼠标整个页面一行的跑,价格条件判段,限制 滑块移动的区域不可以超过边框,保持left<=0。 if(minusX < 0) { // silde.style.left = '0'; minusX = 0; } if(minusX > 260) { //判断最大值 // silde.style.left = '251'; // 这里面的距离用边框长度减去 滑块的长度 300-49 minusX = 260; console.log('我到头了'); } silde.style.left = minusX + 'px'; rec.style.width = minusX + 'px'; if(minusX >= 260) { rect.style.color = 'white'; img.src = 'sure.png'; document.onmousemove = null; silde.onmousedown = null; // rect.innerHTML = '验证成功'; } // console.log(222,e,minusX); //用以测试 } } document.onmouseup = function () { //鼠标抬起事件 document.onmousemove = null; //不允许鼠标移动事件发生 console.log(111); if(minusX < 260) { //如果没有到头 img.src = 'hkkkk.png'; silde.style.left = 0; //设置一个 left值 rec.style.width = 0; //绿色背景层设置宽度 } }</script></body></html>
实现效果:
案例中所用到的小图标可以自行获取:
学习更多技能
请点击下方公众号
一个简单的滑块拖动验证码实例相关推荐
- c 语言 验证码识别算法,一个简单的文件传输验证码识别c/s实现
一个简单的文件传输验证码识别c/s实现 大体思路 client通过tcp向server传输一个待识别的验证图片,server端识别后通过tcp回传给client. server端识别验证码采用pyte ...
- Uipath实现简单的滑块拖动验证
本篇文章主要介绍使用[Click]Activities这一个活动来实现拖动滑块的验证,为拖动滑块验证提供了一种思路.但只能应用于滑块从头滑到尾,不支持拼图的滑块验证. 说白了,这篇文章更像是介绍[Cl ...
- 课表排班java_初学OptaPlanner-02- 基于Spring Boot实现一个简单课程表排班的实例
Spring Boot Java quick start 01. 排班目标 作出一个简单的课程表timetable,示例如下: 时间表的类图 02. Opta的常用注解说明, 关键实体类说明 @Pla ...
- 滑块拖动验证码智能识别验证码技术(持续更新)
众所周知,验证码是用来防机器的.但是,随着神经网络的发展,近几年验证码难度持续上升,这玩意儿的存在存粹就是一种负担,特别是国内到处都是的[Ji验].本文针对"J验"及其他类似验证方 ...
- 一个简单 JDK 动态代理的实例
动态代理的步骤: 创建一个实现了 InvocationHandler 接口的类,必须重写接口里的 invoke()方法. 创建被代理的类和接口 通过 Proxy 的静态方法 newProxyInsat ...
- Qt5.9/C++架构实例(一个简单的MCV架构应用实例)
本文主要在Qt5.9/C++桌面应用项目开发中,总结一个常用的程序架构(或框架),整个工程主要分为三大模块,分别为视图层.控制层.模型层.其中,视图层完全负责界面类的编写和展示:控制层完全负责处理逻辑 ...
- 一个简单的slider滑块组件
2019独角兽企业重金招聘Python工程师标准>>> 我们先来看一张图片: 要实现这样的效果我们有很多种方法,比如直接使用<input type="range&qu ...
- 《ANSYS Workbench 14有限元分析自学手册》——1.7 一个简单的分析实例
本节书摘来自异步社区<ANSYS Workbench 14有限元分析自学手册>一书中的第1章,第1.7节,作者: 吕建国 , 康士廷 更多章节内容可以访问云栖社区"异步社区&qu ...
- QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)
<实例--滑块拖动颜色框的平移> 1. 简介 2. 详解 所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章请点击这里: QT QUICK QM ...
最新文章
- day06:02oracle体系结构_存储结构
- 前端模块化(一):模块化那些事儿
- pip:成功解决pip下载时速度超慢(pip下载慢)的几种方法
- GitHub 上 57 款最流行的开源深度学习项目【转】
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
- tomcat上部署CGI
- ThinkJava-压缩
- 登录harbor时的SSL异常: x509: certificate is valid for ingress.local
- LINUX环境下安装MySQL数据库
- 2.shel脚本l知识点学习一
- 智能优化算法——模拟退火法(PythonMatla实现)
- 教师在家长群内表扬配合家长的话术
- 品牌软文营销借助故事的力量打动用户
- 怎么实现CorelDRAW中轮廓图工具的快速运用
- 工作五年,一年内我靠这系列 java 面试宝典从 13K 到大厂 30K
- EXCEPTION_ACCESS_VIOLATION
- char *c和char c[]区别
- 网络不通使用的PING命令是用的什么协议?
- koa - 洋葱模型浅析
- JavaScript学习简单记录