JS拖动滑块验证

使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作。

实现思路:

  1、获取silde滑块(获取元素)

  2、为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标的X坐标。

  3、如何获取到鼠标的x坐标——使用clientX事件(当事件被触发时,鼠标指针的水平坐标)。

  4、鼠标移动事件发生后根据从最开始点击的X值到移动后的X值之差,作为滑块移动的差值———— 鼠标移动事件 (onmousemove);

  5、获取鼠标移动之后的X坐标

  6、获得初始X坐标和移动后X值

  7、该变 left的值

  8、绿色背景跟着小滑块走

  9、鼠标抬起清除鼠标移动事件。

注意:哪怕鼠标移动的时候超出了最外面的方块区域,滑块也要可以移动。所以不能只在滑块上设置移动事件,需要在文档document上设置移动事件。

主要用到的事件:

1、鼠标点击事件onmousedown;

2、鼠标移动事件onmousemove;

3、获取鼠标指针X坐标 clientX;

4、鼠标按键被松开 onmouseup;(有点类似与 click点击)

注意:

1、作用域——— 一个函数拥有一个作用域 (局部作用域)

2、怎样才能实现鼠标移动的时候使滑块也移动:改变滑块的left值。

3、想要实现滑块跟随鼠标移动,就要获得鼠标移动的x坐标。

实现代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     *{
  8         padding:0;
  9         margin:0;
 10     }
 11     body{
 12         user-select:none;
 13         /*禁止用户选中*/
 14     }
 15     .wrap{
 16         width:300px;
 17         height: 40px;
 18         background-color:#e8e8e8;
 19         margin:100px auto;
 20         text-align: center;
 21         line-height: 40px;
 22         /*border-radius: 7px;*/
 23         position:relative;
 24     }
 25     .rect{
 26         position:relative;
 27         width:300px;
 28         height:100%;
 29     }
 30     .rec{
 31         position:absolute;
 32         top:0;
 33         left:0;
 34         width:0;
 35         height:100%;
 36         background: #00b894;
 37     }
 38     .silde{
 39         position:absolute;
 40         top:0;
 41         left:0;
 42         z-index: 11;
 43         /*在这里面,当设置长宽为40px时在加上边框1px就会超出 40px。
 44         可以使用怪异盒模型,怪异盒模型会使盒子的宽高包括边框,操持40px;*/
 45         box-sizing:border-box;
 46         width:40px;
 47         height:40px;
 48         background: #fff;
 49         border:1px solid #ccc;
 50     }
 51
 52     </style>
 53 </head>
 54 <body>
 55     <div class=‘wrap‘>
 56         <div class=‘rec‘>
 57             <div class=‘rect‘>滑块拖拽验证
 58                 <div class=‘silde‘><img src="hkkkk.png" alt=""></div>
 59             </div>
 60         </div>
 61     </div>
 62     <script>
 63         //获取事件
 64         var silde = document.querySelector(‘.silde‘);
 65         var rec = document.querySelector(‘.rec‘);
 66         var rect= document.querySelector(‘.rect‘);
 67         var img= document.querySelector(‘img‘);
 68         var minusX;  //保存变化的 X坐标(全局变量)
 69
 70         //注册事件
 71         silde.onmousedown = function(e) {    //鼠标点击事件,点击之后执行函数,获得点击位置的X坐标
 72             var initX = e.clientX;    //保存初始按下位置的 X坐标;
 73             console.log(11,e);    //用以测试
 74             document.onmousemove = function(e) {        //鼠标移动事件
 75                 var moveX = e.clientX;
 76                 // var minusX = moveX - initX;    //变化的坐标(要注意作用域的问题,在这里面定义变量,在这个函数之外的函数就没法使用,所以要将minusX变成全局变量)
 77                 minusX = moveX - initX;
 78                  //这里注意一下,获得的minusX只是一个差值,没有单位想让 滑块的位置改变还需要加上 单位px
 79                  //这个时候滑块会跟随鼠标整个页面一行的跑,价格条件判段,限制 滑块移动的区域不可以超过边框,保持left<=0。
 80                  if(minusX < 0) {
 81                      // silde.style.left = ‘0‘;
 82                      minusX = 0;
 83                  }
 84                  if(minusX > 260) { //判断最大值
 85                      // silde.style.left = ‘251‘;
 86                      // 这里面的距离用边框长度减去 滑块的长度 300-49
 87                      minusX = 260;
 88                      console.log(‘我到头了‘);
 89                  }
 90                  silde.style.left = minusX + ‘px‘;
 91                  rec.style.width = minusX + ‘px‘;
 92                  if(minusX >= 260) {
 93                      rect.style.color = ‘white‘;
 94                      img.src = ‘sure.png‘;
 95                      document.onmousemove = null;
 96                      silde.onmousedown = null;
 97                      // rect.innerHTML = ‘验证成功‘;
 98                  }
 99                 // console.log(222,e,minusX);    //用以测试
100             }
101         }
102         document.onmouseup = function () {    //鼠标抬起事件
103             document.onmousemove = null;    //不允许鼠标移动事件发生
104             console.log(111);
105             if(minusX < 260) { //如果没有到头
106                 img.src = ‘hkkkk.png‘;
107                 silde.style.left = 0;    //设置一个 left值
108                 rec.style.width = 0;    //绿色背景层设置宽度
109             }
110         }
111     </script>
112 </body>
113 </html>

 实现效果:

案例中所用到的小图标可以自行获取:

原文地址:https://www.cnblogs.com/nyw1983/p/12014259.html

时间: 2024-10-07 22:17:33

JS拖动滑块验证的相关文章

原生js实现拖动滑块验证

拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .drag{position: relative;

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% Str

CSS+JS的拖动滑块实现价格区间搜索效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html5拖动滑块

html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main{ position: relative;width: 500px;} #range { -w

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

JS表单验证-12个常用的JS表单验证

最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi