JS实现拖动滑块验证
更新时间：2022年03月07日 09:30:59 作者：Cloud%
这篇文章主要为大家详细介绍了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坐标。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
body{
user-select:none;
/*禁止用户选中*/
}
.wrap{
width:300px;
height: 40px;
background-color:#e8e8e8;
margin:100px auto;
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:1px solid #ccc;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='rec'>
<div class='rect'>滑块拖拽验证
<div class='silde'><img src="hkkkk.png" alt=""></div>
</div>
</div>
</div>
<script>
//获取事件
var silde = document.querySelector('.silde');
var rec = document.querySelector('.rec');
var rect= document.querySelector('.rect');
var img= document.querySelector('img');
var minusX; //保存变化的 X坐标（全局变量）
//注册事件
silde.onmousedown = function(e) { //鼠标点击事件，点击之后执行函数，获得点击位置的X坐标
var initX = e.clientX; //保存初始按下位置的 X坐标；
console.log(11,e); //用以测试
document.onmousemove = function(e) { //鼠标移动事件
var moveX = e.clientX;
// var minusX = moveX - initX; //变化的坐标（要注意作用域的问题，在这里面定义变量，在这个函数之外的函数就没法使用，所以要将minusX变成全局变量）
minusX = moveX - initX;
//这里注意一下，获得的minusX只是一个差值，没有单位想让 滑块的位置改变还需要加上 单位px
//这个时候滑块会跟随鼠标整个页面一行的跑，价格条件判段，限制 滑块移动的区域不可以超过边框，保持left<=0。
if(minusX < 0) {
// silde.style.left = '0';
minusX = 0;
}
if(minusX > 260) { //判断最大值
// 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(minusX < 260) { //如果没有到头
img.src = 'hkkkk.png';
silde.style.left = 0; //设置一个 left值
rec.style.width = 0; //绿色背景层设置宽度
}
}
</script>
</body>
</html>实现效果：
案例中所用到的小图标可以自行获取：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript中instanceof与typeof运算符的用法及区别详细解析
这篇文章主要是对JavaScript中instanceof与typeof运算符的用法及区别进行了详细的分析介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
CommonJS是Node中的一种模块化规范，本文主要介绍了Webpack是如何打包CJS的，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要给大家介绍了关于JS监听元素dom变化的相关资料,监听DOM大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表,需要的朋友可以参考下2023-09-09
正则表达式(Regular Expression)是一门简单语言的语法规范，是强大、便捷、高效的文本处理工具，它应用在一些方法中，对字符串中的信息实现查找、替换和提取操作2021-11-11
这篇文章主要为大家详细介绍了JS实现拖拽效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
JavaScript MutationObserver实例讲解
MutationObserver用来监视DOM变动。DOM的任何变动，比如节点增减、属性的变动、文本内容的变动都会触发MutationObserver事件，它与事件有一个本质不同：事件是同步触发，MutationObserver则是异步触发，DOM的变动并不会马上触发，而是要等到当前所有DOM操作都结束才触发2022-12-12
这篇文章主要为大家介绍了Lottie动画前端开发使用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
JavaScript中对象property的读取和写入方法介绍
这篇文章主要介绍了JavaScript中对象property的读取和写入方法介绍,本文讲解了原型继承链中property的读取、原型继承链中property的写入等内容,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS实现动态移动层及拖动浮层关闭的方法,可实现动态拖动浮动窗口及关闭窗口的功能,非常具有实用价值,需要的朋友可以参考下2015-04-04
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
这篇文章主要介绍了BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法,下面通过本文给大家详细说明一下，需要的朋友可以参考下2016-12-12
最新评论