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

主要理解思想就行 图中的代码可能和实际写的有所不同 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. PAT(B) 1088 三人行（Java）

    题目链接:1088 三人行 (20 point(s)) 参考博客:PAT (Basic Level) Practice (中文)1088 三人行 (20 分)(Java实现)吃口雪花 题目描述 子曰: ...

  2. 题解-CSA Round#18 Randomly Permuted Costs

    Problem CSA Round 18 题意概要:给定一个有重边有自环 \(n\) 点 \(m\) 边的有向无环图(DAG),每条边有其权值,每当你走到一个点 \(x\) 时,所有从 \(x\) 连 ...

  3. vs setup 自动下载依赖的framework配置

    1.项目->属性->签名->选中为ClickOnce清单签名->创建测试证书 2.项目->属性->安全性->启用ClickOnce安全设置 3.setup项目 ...

  4. Effective Java 读书笔记（四）：泛型

    1 不要使用原始类型 (1)术语 术语 例子 参数化类型(Parameterized type) List<String> 实际类型参数(Actual type parameter) St ...

  5. SQL Server元数据查询

    原文:SQL Server元数据查询 1.查询触发器的信息 --查询触发器的信息 select name, --触发器名称 (select name from sys.objects where ob ...

  6. VS.NET(C#)--2.8_CCS样式

    CSS样式 文件命名 StyleSheet.css     body { font-size:12px } .button     { color:Red; text-decoration:none; ...

  7. SQL Server2008 查找用户登录日志

    select loginname,accdate from sys.syslogins

  8. SQL Server存储过程中字符串前加N的含义

    使用方法: N'字符串' 解释: 意思为后面的数据类型为NChar或者NVarchar 使用N前缀 在服务器上执行的代码中(例如在存储过程和触发器中)显示的Unicode字符串常量必须以大写字母N为前 ...

  9. python 内置函数和匿名函数

    内置函数 截止到python版本3.6.2,现在python一共为我们提供了68个内置函数.     Built-in Functions     abs() dict() help() min() ...

  10. solr的命令

    Start the Server If you didn’t start Solr after installing it, you can start it by running bin/solr  ...