一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示:

主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改

完整代码:

 <!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>Document</title>

     <style>

         .drag {

             width: 300px;

             height: 40px;

             position: relative;

             background-color: #e8e8e8;

             margin: auto auto;

             user-select: none;

         }

         .bg {

             height: 100%;

             position: absolute;

             width: 40px;

             background-color: rgb(39, 233, 21);

         }

         .text {

             width: 100%;

             height: 100%;

             position: absolute;

             text-align: center;

             line-height: 40px;

         }

         .btn {

             width: 40px;

             height: 38px;

             border: 1px solid #ccc;

             background-color: #fff;

             color: #666;

             line-height: 38px;

             text-align: center;

             position: absolute;

             cursor: move;

         }

     </style>

 </head>

 <body>

     <div class="drag">

         <div class="bg"></div>

         <div class="text" onselectstart="return false;">滑动验证</div>

         <div class="btn">&gt;&gt;</div>

     </div>

 </body>

 <script>

     onload = function () {

         function $(a) {

             return document.querySelector(a);//获取元素的函数

         }

         var oDarg = $(".drag");

         var oBg = $(".bg");

         var oText = $(".text");

         var oBtn = $(".btn");

         var success = false;//判断验证是否成功

         var distance = oDarg.offsetWidth - oBtn.offsetWidth;//验证成功的距离

         oBtn.onmousedown = function (eve) {//给物块设置鼠标按下事件

             oBg.style.transition = "";//在点击事件按下后 必须清除后面设置的transition属性 否则会造成物块移动的bug 具体可自行测试

             oBtn.style.transition = "";

             var e = eve || window.event;

             var downX = e.clientX;//获取鼠标刚按下时的坐标 相对于浏览器页面

             document.onmousemove = function (eve) {//这里要给document设置鼠标移动事件 而不能设置物块 如果设置了物块移动也会有小bug 自行测试

                 var e = eve || window.event;

                 var moveX = e.clientX;//获取鼠标移动时的坐标 相对于浏览器页面

                 var offsetX = moveX - downX;//物块移动的距离

                 if (offsetX > distance) {//如果移动的距离已经大于本应该移动的距离 那么就将它设置为验证成功时的距离

                     offsetX = distance;

                 } else if (offsetX < 0) {//同样 如果移动的距离小于0时 将它设置为0 保证不会超出范围

                     offsetX = 0;

                 }

                 oBtn.style.left = offsetX + "px";

                 oBg.style.width = offsetX + "px";

                 if (offsetX == distance) {//判断验证通过

                     oText.innerHTML = "验证通过";

                     oBtn.innerHTML = "&radic;";

                     oText.style.color = "#FFF";

                     oBtn.style.color = "rgb(39, 233, 21)";

                     success = true;//验证通过时的条件

                     document.onmousemove = null;//验证通过后 鼠标按下事件和鼠标移动都没用了 因此需要清除

                     oBtn.onmousedown = null;

                     setTimeout(function () {

                         alert("解锁成功");

                     }, 10)

                 }

             }

         }

         document.onmouseup = function () {//这里也是给document设置鼠标抬起事件

             if (success) {如果已经验证成功了 那么结束函数

                 return;

             } else {//反之 验证没有通过 则物块原来的位置

                 oBtn.style.left = 0;

                 oBg.style.width = 0;

                 oBg.style.transition = "width 1s ease";

                 oBtn.style.transition = "left 1s ease";

             }

                 document.onmousemove = null;//返回到原来的位置过程中 需要清除鼠标移动事件和鼠标抬起事件

                 oBtn.onmouseup = null;

         }

     }

 </script>

 </html>

完整效果:

一般的网站都有滑动验证功能,理解实现原理,利用原生JS写不难,希望能对你有所帮助!

原生JS实现滑动验证功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  3. 原生js实现vue组件功能

    在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...

  4. js实现滑动解锁功能（PC+Moblie）

    http://dummyimage.com/600x400/ http://placehold.it/140x70 实现效果: css样式代码略. html代码: 页面上导入了jquery.mobil ...

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

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

  6. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

  7. 【原生JS】滑动门效果

    效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...

  8. 原生js实现拖拽功能

    1. 给个div,给定一些样式 <div class="drag" style="left:0;top:0;width:100px;height:100px&quo ...

  9. 利用原生JS实现类似浏览器查找高亮功能(转载）

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

随机推荐

  1. Python进阶:对象复制与比较,分深浅,见真假

    "==" 与 is python 为 10 开辟内存空间, a与b同时指向这块内存,即a与b的值相等,a与b的id也相等.因此 a==b 与 a is b 都返回True: a = ...

  2. 计算机网络--TCP协议深入理解

    在近期学习计算机网络的过程中,由于知识点过于零散,琐碎,从而学习起来痛苦不堪,此贴只是总结了基于传输层的TCP协议相关的知识细节,并加入一点自己的理解,并无创新,若有理解不当之处,敬请提出,感谢! 首 ...

  3. IIS不能下载config配置文件的解决方法

    之前作程序升级的时候,需要从服务端下载后缀为config的配置文件,结果程序抛出404异常.后来百度才知道,是IIS禁止下载config文件的原因.在这里记录一下解决方法. 在我的电脑,右键管理,打开 ...

  4. oracle笔记之计算年龄、工龄和TRUNC

    方法一:利用months_between 函数计算 SELECT TRUNC(months_between(sysdate, birthday)/12) AS agefrom dual; 方法二:日期 ...

  5. 撸一个 vue 的截图组件，按比例截取

    <template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...

  6. springboot2.0+mybatis多数据源集成

    最近在学springboot,把学的记录下来.主要有springboot2.0+mybatis多数据源集成,logback日志集成,springboot单元测试. 一.代码结构如下 二.pom.xml ...

  7. 【转载】C#通过StartWith和EndWith方法判断字符串是否以特定字符开始或者结束

    C#开发过程中针对字符串String类型的操作是常见操作,有时候业务需要判断某个字符串是否以特定字符开头或者特定字符结束,此时就可使用StartsWith方法来判断目标字符串是否以特定字符串开头,通过 ...

  8. idea中异常处理快捷键

    键盘按下 alt+Enter 一般选择try/catch这一个

  9. 计算机等级考试【二级C语言程序设计】知识点整理

    *免责声明:本文章中所收集或者引用到的内容的所有版权均为引用内容的原作者所有,本站仅作收集并整理,不承担任何法律责任! *题库收集来源于:[未来教育考试软件2017年版 - 计算机二级 - C语言程序 ...

  10. SAP-参数（条件表）配置教程–GS01/GS02/GS03

    转载:http://www.baidusap.com/abap/others/2849 在SAP开发中,某段代码运行可能需要满足某个条件,通常解决办法有两种:一种是在代码中写死限制条件,此种方式当限制 ...