♀分享一组利用原生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. oracle中Blob、Clob、Varchar之间的互相转换

    以下是oracle中Blob.Clob.Varchar之间的互相转换(都是百度找的,亲测可用) Blob转Varchar2: CREATE OR REPLACE FUNCTION blob_to_va ...

  2. kettle下载地址

    kettle 4.4和4.2 版本是好的,版本6.6和8.2 版本有bug Kettle下载和安装: 1.官网各个版本下载地址:https://sourceforge.net/projects/pen ...

  3. python 字典所有操作

    # 字典的创建# dict1 = {}# print(type(dict1))## dict2 = {# 'name':'汪峰',# 'sex':'男',# 'hiredate':'1997-10-2 ...

  4. spring-data-redis 2.0 的使用

    在使用Spring Boot2.x运行Redis时,发现百度不到顺手的文档,搞通后发现其实这个过程非常简单和简洁,觉得有必要拿出来分享一下. Spring Boot2.x 不再使用Jedis,换成了L ...

  5. 【第一季】CH07_FPGA_RunLED创建VIVADO工程实验

    [第一季]CH07_FPGA_RunLED创建VIVADO工程实验 7.1 硬件图片 先来熟悉一下开发板的硬件:LED部分及按钮部分 7.2 硬件原理图 PIN脚定义(讲解以MIZ702讲解,MIZ7 ...

  6. 【AC自动机】最短母串

    [题目链接] https://loj.ac/problem/10061 [题意] 给定 n 个字符串 S1-Sn,要求找到一个最短的字符串 T,使得这 n 个字符串都是 T 的子串. [题解] 类似于 ...

  7. 少儿编程Scratch第三讲：宇宙大战.枪战游戏

    小朋友这周的表现还算不错.周末多数时间都由我陪(bi)着(zhe)做课本上的数学题,后来还学了英语.任重道远啊,语数外都还得加强,还远不到自己就能取得好成绩的阶段. 上周说好这周要做一个发射炮弹的游戏 ...

  8. Codeforces 1247C. p-binary

    传送门 首先 $n=\sum_{i=1}^{ans}(2^{x_{ans}}+p)$ 可以变成 $n-ans \cdot p=\sum_{i=1}^{ans}2^{x_{ans}}$ 注意到如果 $n ...

  9. MyBatis 源码篇-资源加载

    本章主要描述 MyBatis 资源加载模块中的 ClassLoaderWrapper 类和 Java 加载配置文件的三种方式. ClassLoaderWrapper 上一章的案例,使用 org.apa ...

  10. 三种定位+堆叠+li小黑点变图片

    定位: 定位分为三种: position:static(默认值) relation(相对定位):进行较小偏移,不会脱离文档流,原位置保留 absolute(绝对定位):脱离文档流,不占据页面空间,变成 ...