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

主要理解思想就行 图中的代码可能和实际写的有所不同 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. 多线程（11） — NIO

    Java NIO是new IO的简称,是一种可以替代Java IO的一套新的IO机制.它提供了一套不同于Java标准IO的操作机制,严格来说,NIO与并发并无直接关系,但是使用NIO技术可以大大提高线 ...

  2. C++ 中 static 与 const 的用法及对比

    在这个学习过程中我对 static 及 const 的使用时常会混淆,因此整理,加深记忆 一.类的静态成员 如果某个属性为整个类所共有,不属于任何一个具体对象,则采用 static 关键字来声明静态成 ...

  3. FZU2018级算法第五次作业 m_sort（归并排序或线段树求逆序对）

    首先对某人在未经冰少允许情况下登录冰少账号原模原样复制其代码并且直接提交的赤裸裸剽窃行为,并且最终被评为优秀作业提出抗议! 题目大意: 给一个数组含n个数(1<=n<=5e5),求使用冒泡 ...

  4. 从零开始学Flask框架-002

    Jinja2模板 默认情况下,Flask 在程序文件夹中的templates 子文件夹中寻找模板. Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/b ...

  5. Scratch 少儿编程之旅（四）— Scratch入门动画《小猫捉蝴蝶》（中）

    本期内容概括: 了解Scratch的更多操作,用[无限循环]来更改“小猫”角色的代码: 添加[碰到边缘就反弹]积木块指令: 更改角色的旋转模式和造型,让”小猫”走路更生动: 两种[循环]语句的区别: ...

  6. 《阿里巴巴 Java 开发规约》自动化检测插件安装及体验

    2017 开春之际,有助于提高行业编码规范化水平的<阿里巴巴 Java 开发手册>首次面世.汇聚阿里集团近万名技术精英的经验知识,这套高含金量的手册一经公开,便引起业界普遍关注和学习. 历 ...

  7. 移动端调试工具Vconsole

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 分享一个仿网易新闻客户端iPhone版的标签式导航ViewController

    该Controller是一个容器,用于容纳其他的controller.效果与网易新闻客户端的标签式导航基本一样: (1)点击上面的标签,可以切换到对应的controller,标签下面的红色提示条的长度 ...

  9. ubuntu18.04 安装android studio

    首先从官网下载android studio:Android Studio (安装前应先安装JDK环境) 得到android-studio-ide-191.5977832-linux.tar.gz 在安 ...

  10. jenkins中的流水线( pipeline)的理解（未完）

    目录 一.理论概述 Jenkins流水线的发展历程 什么是Jenkins流水线 一.理论概述 pipeline是流水线的英文释义,文档中统一称为流水线 Jenkins流水线的发展历程 ​ 在Jenki ...