拖动滑块验证是现在的网站随处可见的，各式各样的拖动法都有。

下面实现的是某宝的拖动滑块验证：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .drag{position: relative;width: 300px;height: 34px;background-color: #e8e8e8;line-height: 34px;}

        .bg{position: absolute;width: 40px;height: 100%;background-color: #7ac23c;}

        .text{position: absolute;width: 100%;margin: 0;text-align: center;}

        .btn{position: absolute;width: 40px;height: 32px;background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==) center no-repeat;border: 1px solid #ccc;cursor: pointer;}

    </style>

</head>

<body>

    <div class="drag">

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

        <p class="text">拖动滑块验证</p>

        <div class="btn"></div>

    </div>

    <script>

        var $ = function(selector){

            return document.querySelector(selector);

        },

        box = $('.drag'),//容器

        bg = $('.bg'),//绿色背景

        text = $('.text'),//文字

        btn = $('.btn'),//拖动按钮

        done = false;//是否通过验证

        btn.onmousedown = function(e){

            var e = e || window.event;

            var posX = e.clientX - this.offsetLeft;

            btn.onmousemove = function(e){

                var e = e || event;

                var x = e.clientX - posX;

                this.style.left = x + 'px';

                bg.style.width = this.offsetLeft + 'px';

                // 通过验证

                if(x >= box.offsetWidth - btn.offsetWidth){

                    done = true;

                    btn.onmousedown = null;

                    btn.onmousemove = null;

                    text.innerHTML = '通过验证';

                }

            };

            document.onmouseup = function(){

                btn.onmousemove = null;

                btn.onmouseup = null;

                if(done)return;

                btn.style.left = 0;

                bg.style.width = 0;

            }

        };

        text.onmousedown = function(){

            return false;

        }

    </script>

</body>

</html>

由于是原生js实现的，因此没有加上动画效果，不然代码量太大。

代码简单，直接看下结构就明了了。

原生js实现拖动滑块验证的更多相关文章

  1. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  2. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  3. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  4. js移动端滑块验证解锁组件

    本文修改自PC端的js滑块验证组件,PC端使用的是onmousedown,onmouseup,nomousemove.原文找不到了,也是博客园文章,在此感谢广大网友的生产力吧. 说下对插件和组件的理解 ...

  5. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  6. 原生js（form）验证，可以借鉴下思路，应用到工作中

    我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...

  7. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  8. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  9. JS拖动滑块验证

    使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作. 实现思路: 1.获取silde滑块(获取元素) 2.为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标 ...

随机推荐

  1. PYQT5实现文件目录浏览

    def setBrowerPath(self): download_path = QtWidgets.QFileDialog.getExistingDirectory(self, "浏览&q ...

  2. 如何使用linq读取DataTable集合？AsQueryable() 和 AsEnumerable()区别？

    一.准备工作 引入linq和data 相关的using命名空间 DataTable dt=new DataTable();//dt的来源可以是多个地方,比如:数据库,Excel等等.我这里使用Exce ...

  3. 接口interface和抽象类型abstract

    一.接口 接口不能被实例化 接口只能包含方法声明 接口的成员包括方法.属性.索引器.事件 接口中不能包含常量.字段(域).构造函数.析构函数.静态成员 接口中的所有成员默认为public,因此接口中不 ...

  4. “全栈2019”Java多线程第二十五章：生产者与消费者线程详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  5. django 模型对象的 update() get_or_create() 的使用

    update() 如果一个查询集是一个列表对象, 需要更新该列表对象里所有的单个数据集的数据,可以使用update()方法,而不须遍历整个查询集对象一个个逐一进行修改 obj_list = UserI ...

  6. jzoj5875

    這玩意嚴格意義上算是水法(因為可能會被卡) 題目中,如果按照一般的bfs來搜索,那麼有平方級邊,會tle 如果按照補邊的線性來搜索,那麼時間複雜度變為min(k*k,m)*n,視n,m同階,則時間複雜 ...

  7. Django(app的概念、ORM介绍及编码错误问题)

    day61 Django中的APP:         什么是APP?以及为什么要用APP?                  project  --> 项目  (老男孩教育大学校)        ...

  8. 详述MySQL服务在渗透测试中的利用

    本文作者:i春秋签约作家——Binghe 致力于书写ichunqiu社区历史上最长篇最细致最真实的技术复现文章. 文章目录: MySQL之UDF提权 MySQL之MOF提权 MySQL之常规写启动项提 ...

  9. mybatis单表操作实现完全java代码封装

    之前在项目中用到mybtis操作数据库时都是手动写sql,对于我这种sql水平不是很好地人来说痛苦死了:动态查询的sql我表示到现在还不会写呀! 还好,利用数据库表反向生成的工具可以帮我解决大部分的s ...

  10. 在node中使用promise上传图片到七牛云

    为了分摊个人服务器压力.提升图片下载上传的速度,使用七牛云保存用户上传的图片. 后台基于express搭建的,上传使用七牛云第三方nodejs-sdk.由于七牛云上传图片只能单个进行,并且考虑到上传完 ...