♀分享一组利用原生JS实现拖动滑块验证效果

♀在这个组代码中涉及三个方面的知识：

⑴事件处理

⑵添加验证标记

⑶选择器的封装

 

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>验证码</title>

    <style>

      .box{

             position:relative;

         width: 200px;

         height: 40px;

         background: #CCC;

         display: block;

         margin:150px auto;

      }

      .btn{

        background:#EEE url(1.png) no-repeat;

        background-position: center center;

          position:absolute;

          top:0;

          width: 40px;

          height: 40px;

          z-index: 3;

        line-height:40px;

      }

      .text{

          position: absolute;

          width: 100%;

          margin: 0;

        line-height:40px;

          text-align: center;

          z-index: 2;

      }

      .bg{

          position: absolute;

          height: 100%;

          background-color: #7ac23c;

          z-index: 1;

      }

    </style>

</head>

<body>

    <div class="box">

    <!-- 滑块 -->

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

    <!-- 文字 -->

    <p class="text">请向右滑动滑块</p>

    <!-- 背景 -->

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

    </div>

    <script>

      window.onload = function(){

          //选择器封装

          var fun2 = function(name){//函数表达式

             return document.querySelector(name);

          };

          var btn = fun2(".btn"),//按钮

              box = fun2(".box"),//盒子

              text = fun2(".text"),//文字

              bg = fun2(".bg"),//背景

              flag = false;//验证失败

          //鼠标按下

          //event 对象 事件的状态

          btn.onmousedown = function(event){

              var e = event || window.event;

              var downX = e.clientX; //按下与X轴的点

              //移动

              btn.onmousemove = function(event){

                  var moveX = event.clientX - downX;  //移入的距离-按下的距离

                  //移动范围

                  if(moveX > 0){

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

                      bg.style.width = moveX + 'px';

                      //验证成功

                      if(moveX >= (box.offsetWidth - this.offsetWidth)){

                          flag = true; //'验证成功'

                          text.innerHTML = '验证成功';

                          text.style.color = '#fff';

                          btn.onmousemove = null;  //清除事件

                          btn.onmousedown = null;  //清除事件

                      }

                  }

              };

          };

          //松开

          btn.onmouseup = function(){

              btn.onmousemove = null;  //清除事件

              //判断条件

              if(flag) return;

              this.style.left = 0;

              bg.style.width = 0;

           }

      }

    </script>

</body>

</html>

 

效果图：

参考：https://www.bilibili.com/video/av75439023

原生JS实现拖动滑块验证登录效果的更多相关文章

  1. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  2. js 拖动滑块验证

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

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

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

  4. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  5. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  6. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

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

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

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

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

  9. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

随机推荐

  1. MongoDB使用过程中的报错处理（持续更新）

    1.连接池问题 com.mongodb.DBPortPool$SemaphoresOut Concurrent requests for database connection have exceed ...

  2. centos7.4安装图形界面及报错处理

    笔者实验环境:centos 7.4.1708,安装时默认最小化安装. 安装命令: yum -y update #如果不想升级内核版本可以参考笔者另一篇文章,关于update跟upgrade的区别yum ...

  3. DP的初级问题——01包、最长公共子序列、完全背包、01包value、多重部分和、最长上升子序列、划分数问题、多重集组合数

    当初学者最开始学习 dp 的时候往往接触的是一大堆的 背包 dp 问题, 那么我们在这里就不妨讨论一下常见的几种背包的 dp 问题: 初级的时候背包 dp 就完全相当于BFS DFS 进行搜索之后的记 ...

  4. 针对Web的信息搜集

    信息收集(Information Gathering),信息收集是指通过各种方式获取所需要的信息,在整个渗透测试环节中,信息搜集是整个渗透过程中最为重要的一环,信息搜集可占据整个渗透测试80%左右的工 ...

  5. Linux学习(五)-Linux组管理和权限管理

    Linux组基本介绍 在Linux中的每一个用户必须属于一个组,不能独立与组外.在Linux中每个文件有所有者,所在组,其他组的概念 所有者 所在组 其它组 改变用户所在组 1.文件/目录 所有者 文 ...

  6. Redis的最常见面试问题

    Redis的那些最常见面试问题[转] 1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据 ...

  7. 《数据结构与算法之美》 <01>复杂度分析（上）：如何分析、统计算法的执行效率和资源消耗？

    我们都知道,数据结构和算法本身解决的是“快”和“省”的问题,即如何让代码运行得更快,如何让代码更省存储空间.所以,执行效率是算法一个非常重要的考量指标. 那如何来衡量你编写的算法代码的执行效率呢?这里 ...

  8. （十二）A64

    一.AC108驱动移植 1.驱动添加 cp r18/lichee/linux-4.4/sound/soc/codecs/ac108.* a64/linux-3.10/sound/soc/codecs/ ...

  9. kubernetes之健康状态检测

    1.说明 容器探针: kubelet 对容器执行的定期诊断 探针执行方式: LivenessProbe: 判断容器是否存活 running状态, 如果不健康kubelet就会杀掉pod,根据重启策略R ...

  10. php连接oracle oracle开启扩展

    <?php /** * 由于公司的需要,使用php+oracle开发项目,oracle因为有专门人员开发设计,我们只需远程调用 *于是乎遇到了蛋疼的问题就是开启oracle扩展的问题,虽然你在p ...