♀分享一组利用原生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. Hadoop学习(4)-mapreduce的一些注意事项

    关于mapreduce的一些注意细节 如果把mapreduce程序打包放到了liux下去运行, 命令java  –cp  xxx.jar 主类名 如果报错了,说明是缺少相关的依赖jar包 用命令had ...

  2. linux中学习中提炼出来的命令

    Linux: 基于debain的系统(如:Ubuntu等)pms基本工具:aptitude[apt-get],dpkgaptitude search package_name 查看软件包是否已安装,如 ...

  3. HDU 4417-Super Mario-线段树+离线

    Description Mario is world-famous plumber. His "burly" figure and amazing jumping ability ...

  4. python 定时爬取内容并发送报告到指定邮箱

    import requests import smtplib import schedule import time from bs4 import BeautifulSoup from email. ...

  5. Kafka实际使用过程中遇到的一些问题及解决方法

    Kafka实际使用过程中遇到的一些问题及解决方法: 1.关于Kafka的分区: 开始使用Kafka的时候,没有分区的概念,以为类似于传统的MQ中间件一样,就直接从程序中获取Kafka中的数据. 后来程 ...

  6. Python文件的四种读写方式——r a w r+

    # 文件的基本操作,但是一般不这么使用,因为经常会忘记关闭 password=open("abc.txt",mode="r",encoding="UT ...

  7. eclipse 创建聚合maven项目（转）

    转自https://blog.csdn.net/u013239111/article/details/76560167 以前我们搭建项目时,通常是吧pojo.dao.service.配置文件等都放在一 ...

  8. react 管理平台

    https://open.vbill.cn/react-admin/ 开源中国:https://gitee.com/sxfad/react-admin.git GitHub:https://githu ...

  9. ztree入门

    ztree入门 ztree可用于权限管理,机构部门等有层次的数据 准备工作 ztree官网 点击右上角的GitHub或者码云的地址将demo下载到本地 在本地新建一个项目,将下载的文件中zTreeSt ...

  10. Unsupported major.minor version 52.0错误和 jdbc odbc

    什么是JDBC? JDBC, 全称为Java DataBase Connectivity standard, 它是一个面向对象的应用程序接口(API), 通过它可访问各类关系数据库.JDBC也是jav ...