♀分享一组利用原生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. c# bitmap的拷贝及一个图像工具类

    using (Bitmap bmp = new Bitmap(scanImgPath)) { Bitmap bitmap = new Bitmap(bmp.Width, bmp.Height, Pix ...

  2. Zookeeper快速开始

    具体部署流程: #下载 wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/current/apache-zookeeper-3.5. ...

  3. Python 常用外部模块详解

    Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...

  4. eclipse导入maven空项目,eclipse导入时不识别maven项目

    经常我们在网上下载的一些开源项目中,想要导入eclipse中,却发现eclipse不识别这个项目,这时候怎么办呢? 解决办法多种多样,我这里举例出最实用的2种: 1.在项目的根目录中加入.classp ...

  5. Scala学习十六——XML处理

    一.本章要点 XML字面量<like>this</like>的类型为NodeSeq 可以在XML字面量中内嵌Scala代码 Node的child属性产出后代节点 Node的at ...

  6. java7：核心技术与最佳实践读书笔记——类加载

    流程:class -> 加载 ->  jvm虚拟机 -> 链接 . 一.类加载器概述 1.引出      类加载器也是一个java类,java.lang.ClassLoader类是所 ...

  7. 计算两个坐标点的距离(高德or百度)

    /// <summary> /// 获取两个坐标之间的距离 /// </summary> /// <param name="lat1">第一个坐 ...

  8. PowerDesigner最基础的使用方法

    1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自行学习) 我的PowerDesigner版本是16.5的,如若版本不一样,请自行参考学习即可.(打开软件即是 ...

  9. java关键知识汇总

    1.泛型理解 2.java或Java框架中常用的注解及其作用详解 3.三层架构和MVC的区别 4.jdk1.8手册(提取码:bidm) 5.Rocketmq原理&最佳实践 6.spring入门 ...

  10. net core体系-Xamarin-2概要(lignshi)

    通过本套课程的学习,各位学员能够对Xamarin有一个比较清楚的认识,掌握Xamarin常用功能的使用方法,能够比较熟练的使用Xamarin进行App(移动应用)的开发,能够比较轻松.快速地投入项目当 ...