JS实现拖动滑块验证

第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坐标。

实现代码：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleDocument/title

style

*{

padding:0;

margin:0;

}

body{

user-select:none;

/*禁止用户选中*/

}

.wrap{

width:300px;

height:40px;

background-color:#e8e8e8;

margin:100pxauto;

text-align:center;

line-height:40px;

/*border-radius:7px;*/

position:relative;

}

.rect{

position:relative;

width:300px;

height:100%;

}

.rec{

position:absolute;

top:0;

left:0;

width:0;

height:100%;

background:#00b894;

}

.silde{

position:absolute;

top:0;

left:0;

z-index:11;

/*在这里面，当设置长宽为40px时在加上边框1px就会超出40px。

可以使用怪异盒模型，怪异盒模型会使盒子的宽高包括边框，操持40px；*/

box-sizing:border-box;

width:40px;

height:40px;

background:#fff;

border:1pxsolid#ccc;

}

/style

/head

body

div

div

div滑块拖拽验证

divimgsrc="hkkkk.png"alt=""/div

/div

/div

/div

script

//获取事件

varsilde=document.querySelector('.silde');

varrec=document.querySelector('.rec');

varrect=document.querySelector('.rect');

varimg=document.querySelector('img');

varminusX;

//保存变化的X坐标（全局变量）

//注册事件

silde.onmousedown=function(e){

//鼠标点击事件，点击之后执行函数，获得点击位置的X坐标

varinitX=e.clientX;

//保存初始按下位置的X坐标；

console.log(11,e);

//用以测试

document.onmousemove=function(e){

//鼠标移动事件

varmoveX=e.clientX;

//varminusX=moveX-initX;

//变化的坐标（要注意作用域的问题，在这里面定义变量，在这个函数之外的函数就没法使用，所以要将minusX变成全局变量）

minusX=moveX-initX;

//这里注意一下，获得的minusX只是一个差值，没有单位想让滑块的位置改变还需要加上单位px

//这个时候滑块会跟随鼠标整个页面一行的跑，价格条件判段，限制滑块移动的区域不可以超过边框，保持left=0。

if(minusX0){

//silde.style.left='0';

minusX=0;

}

if(minusX260){//判断最大值

//silde.style.left='251';

//这里面的距离用边框长度减去滑块的长度300-49

minusX=260;

console.log('我到头了');

}

silde.style.left=minusX+'px';

rec.style.width=minusX+'px';

if(minusX=260){

rect.style.color='white';

img.src='sure.png';

document.onmousemove=null;

silde.onmousedown=null;

//rect.innerHTML='验证成功';

}

//console.log(222,e,minusX);

//用以测试

}

}

document.onmouseup=function(){

//鼠标抬起事件

document.onmousemove=null;

//不允许鼠标移动事件发生

console.log(111);

if(minusX260){//如果没有到头

img.src='hkkkk.png';

silde.style.left=0;

//设置一个left值