♀分享一组利用原生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. jenkins持续集成(windows slave+svn+.net)

    一．Windows slave配置 1.系统管理->节点管理->新建节点 2.节点列表中点击新增的节点名称按提示下载agent.jar, 在windows slave机器执行(copy页面 ...

  2. LeetCode 第 164 场周赛

    访问所有点的最小时间 不难看出,从点(x1,y1) 到 (x2,y2) 的步数需要 min(dx,dy),其中 dx = abs(x1-x2),dy = abs(y1-y2) class Soluti ...

  3. 考研路茫茫——空调教室HDU2242（Tarjan缩点）

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=2242 给你一个图,问你缩完点树上割边的做小绝对值差. 思路: 这题核算起来整整做了我一天(即24个小时)! ...

  4. 关于Visual Studio 2019安装时共享组件、工具和 SDK安装位置不能更改的问题

    解决办法: 更改注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\Setup下的SharedInstallationPath项为所要的路径

  5. C++遍历文件夹

    struct _finddata_t { unsigned attrib; //文件属性 time_t time_create; //文件创建时间 time_t time_access; //文件上一 ...

  6. 【原创】大叔经验分享（83）impala执行多个select distinct

    impala在一个select中执行多个count distinct时会报错,比如执行 select key, count(distinct column_a), count(distinct col ...

  7. React ~ 小结

    React 小结 state 与 props react 里,只需更新组件的state,然后根据新的state重新渲染用户界面,不需要操作dom. 添加类的构造函数来初始化状态this.state,类 ...

  8. 【SpringBoot】整合日志框架

    一.日志框架概述 1.1 日志框架的产生 1.2 市面上的日志框架 二.SLF4j 使用与整合 2.1 如何在系统中使用SLF4j 2.2 如何整合日志框架 2.3 SpringBoot中的日志关系 ...

  9. 我理解的epoll（一）——实现分析

    epoll项目中用了几次,但是对于其原理只是一知半解.我希望通过几篇blog能加深对她的理解. 我认为epoll是同步IO,因为他在调用epoll_wait时,内核在有I/O就绪前是阻塞的,虽然可以将 ...

  10. VMware虚拟机与Linux Centos7下载及安装教程

    1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:https://www.centos.org/download/ DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上 ...