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

主要理解思想就行 图中的代码可能和实际写的有所不同 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. hadoop常见问题收集

    hadoop 搭建 常用命令记录 快捷键安装在/user/local/bin目录下 nano 文件名 ctrl + k 剪切一行 ctrl + o 保存并重命名,不重命名直接enter ctrl + ...

  2. （二）spring Security 自定义登录页面与校验用户

    文章目录 配置 security 配置下 MVC 自定义登录页面 自定义一个登陆成功欢迎页面 效果图 小结: 使用 Spring Boot 的快速创建项目功能,勾选上本篇博客需要的功能:web,sec ...

  3. Android中使用LitePal操控SQLite数据库

    <第一行代码>读书手札 (一)什么是LitePal数据库 LitePal数据库是安卓的一个开源库,我们在以后的开发中,将会遇到许许多多的开源库,感谢开源社 区:因为开源社区的存在,一些我们 ...

  4. CF731E Funny Game

    题目描述 一个长度为 N 的序列 ai ,双方轮流操作 每次的操作是选择一个长度大于 1 的前缀,计算它的和 s ,然后 用 s 替换它的前缀,同时当前玩家获得 s 的分数. 当只剩下一个元素,游戏结 ...

  5. Burp Suite的安装与使用

    ​ Burp Suite是一个集成化的渗透测试工具,它集合了多种渗透测试组件,使我们自动化地或手工地能更好的完成对web应用的渗透测试和攻击.在渗透测试中,我们使用Burp Suite将使得测试工作变 ...

  6. loginserver 个人草稿

    <script> (function($, doc) { /*var contextpath = "http://192.168.0.102:8080/pwgtjq"; ...

  7. Angular Material 学习笔记 Chips

    依据 material guidelines, chips 可以用来做 filter https://material.io/design/components/chips.html#filter-c ...

  8. Math.random()的加密安全替换方法window.crypto.getRandomValues

    Math.random() 返回介于 0(包含) ~ 1(不包含) 之间的一个随机数. Math.random()函数不是加密安全的随机数生成器. window.crypto.getRandomVal ...

  9. android 错误解决

    转自:https://blog.csdn.net/gbstyle/article/details/82926358 错误1: com.android.ddmlib.AdbCommandRejected ...

  10. 在我的电脑中删除wps云文档图标

    在我的电脑中删除wps云文档图标 右键点击win10左下角选择运行,输入regedit打开注册表后,找到以下注册表路径: HKEY_CURRENT_USER\Software\Microsoft\Wi ...