使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。

实现思路：

　　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>

 实现效果：

案例中所用到的小图标可以自行获取：

JS拖动滑块验证的更多相关文章

  1. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  2. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  3. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  4. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  5. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

  6. js登录滑动验证，不滑动无法登陆

    js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html; ...

  7. js移动端滑块验证解锁组件

    本文修改自PC端的js滑块验证组件,PC端使用的是onmousedown,onmouseup,nomousemove.原文找不到了,也是博客园文章,在此感谢广大网友的生产力吧. 说下对插件和组件的理解 ...

  8. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  9. [Android实例] 拖动滑块进行图片拼合验证方式的实现

    该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...

随机推荐

  1. 论文阅读 | Towards a Robust Deep Neural Network in Text Domain A Survey

    摘要 这篇文章主要总结文本中的对抗样本,包括器中的攻击方法和防御方法,比较它们的优缺点. 最后给出这个领域的挑战和发展方向. 1 介绍 对抗样本有两个核心:一是扰动足够小:二是可以成功欺骗网络. 所有 ...

  2. PostgreSQL编码格式：客户端服务器、客户端、服务器端相关影响

    关于字符编码这块,官网链接: https://www.postgresql.org/docs/current/charset.html 刚刚写了几百字的东西因为断网,导致全没有了,重头再写,我就只想记 ...

  3. NOIP 2017 逛公园 题解

    题面 这道题是一道不错的计数类DP: 首先我们一定要跑一遍dijkstra来求得每个点到1号点的最短路: 注意题干,题中并没有说所有点都可以到达n好点,只说了存在一条1号点到n号点的路径:所以我们在反 ...

  4. 线性基求交（线段树）--牛客第四场（xor）

    题意: 给你n个基,q个询问,每个询问问你能不能 l~r 的所有基都能表示 x . 思路: 建一颗线性基的线段树,up就是求交的过程,按照线段树区间查询的方法进行check就可以了. #define ...

  5. vim /etc/security/limits.conf中的hard和soft

    转自:https://blog.csdn.net/zxljsbk/article/details/89153690 "soft" 和 "hard" 的区别sof ...

  6. 强大的开源企业级数据库监控利器Lepus

    Lepus监控简单介绍 官方网站:http://www.lepus.cc 开源企业级数据库监控系统 简洁.直观.强大的开源数据库监控系统,MySQL/Oracle/MongoDB/Redis一站式性能 ...

  7. MySQL 下载与安装

    从MySQL官网下载安装文件,我的电脑是window10 64位的,下载社区版本,选择mysql community server,再下载64位的. 官网链接:https://www.mysql.co ...

  8. ELF文件格式理解

    ELF(Executable and Linking Format)是一种对象文件的格式,用于定义不同类型的对象文件(Object files)中都放了什么东西.以及都以什么样的格式去放这些东西.它自 ...

  9. 批处理 使用默认浏览器 打开html文件

    @echo offfor /f "tokens=3,4" %%a in ('"reg query HKEY_CLASSES_ROOT\http\shell\open\co ...

  10. jenkins自动部署代码到多台服务器

    下面讲一下如何通过一台jenkins服务器构建后将代码分发到其他的远程服务器,即jenkins自动部署代码到多台服务器. 1.下载 pulish over ssh 插件 2.系统管理 -> 系统 ...