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

主要理解思想就行 图中的代码可能和实际写的有所不同 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，看完即会，不用收藏！

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  2. UVALive-8201-BBP Formula

    8201-BBP Formula Time limit: 3.000 seconds In 1995, Simon Plouffe discovered a special summation sty ...

  3. jquery中filter()和find()函数区别

    通常把这两个函数,filter()函数和find()函数称为筛选器. 下面的例子分别使用filter函数和find函数对一组列表进行筛选操作. 一组列表: <li>1</li> ...

  4. php中比较复杂但又常用的字符串函数

    php系统核心库自带的函数中,字符串比数组函数较为简单,但还是有一些较为复杂但又很常用的函数,比如下面的这些函数 explode()函数 用一个字符串来分割另一个字符串,返回结果是一个数组 explo ...

  5. 【Qt】Qt5.12编译MySQl5.7驱动(亲自测试成功)

    目录 00. 目录 01. 安装Qt5.12 02. 打开MySQL源码项目 03. 编译MySQL驱动代码 04. 修改mysql.pro文件 05. 编译之后得到对应的库 06. 拷贝动态库到指定 ...

  6. SAS学习笔记56 ODS ESCAPECHAR

    这种内嵌格式独立于style型和table型,它既可以结合二者使用,也可以独立使用.它主要通过下列语句的格式形式来进行调用: ODS ESCAPECHAR ‘^’; 上述符号’^’表示触发条件,如果碰 ...

  7. io.lettuce.core.protocol.ConnectionWatchdog - Reconnecting, last destination was ***

    一.问题 redis起来后一直有重连的日志,如下图: 二.分析 参考lettuce-core的github上Issues解答https://github.com/lettuce-io/lettuce- ...

  8. 【转载】Sqlserver存储过程中使用Select和Set给变量赋值

    Sqlserver存储过程是时常使用到的一个数据库对象,在存储过程中会使用到Declare来定义存储过程变量,定义的存储过程变量可以通过Set或者Select等关键字方法来进行赋值操作,使用Set对存 ...

  9. ASCII&UNICODE编码演化

    ASCII 上个世纪60年代,美国制定了基于拉丁字母的一套电脑编码系统,取名为ASCII.它主要用于显示现代英语和其他西欧语言,是现今最通用的单字节编码系统. ASCII码使用指定的7位或8位二进制数 ...

  10. vue打包后.woff字体文件路径问题处理

    在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决