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>
实现效果：
案例中所用到的小图标可以自行获取：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE
-
JavaScript实现拖动滑块拼图验证功能（html5、canvas）
引言: 滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上! 效果: 实现思路: 用一张画布绘制源图,再绘制一个填充的方形,这样就可以达到缺失的效果(方形的坐标是随机的): 再用一个画布绘制拖动块,同时用drawImage截取和上一步中方形区域一样坐标.大小的原图,就作为验证图了,把验证图放在最左边: 在拖动块处,按下鼠标然后拖动,拖动块和验证图会跟随鼠标移动,达到一定范围后放开鼠标,会进行验证: 验证通过则提示验证成功,验证不通过则拖动块和验证图会返回到最左边.
-
原生JavaScript实现滑动拖动验证的示例代码
本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里 看到完整的源码. 原生实现 原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML
-
原生JS封装拖动验证滑块的实现代码示例
前言 星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果 分析 看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库 具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM
-
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
JS实现拖动滑块验证
使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作. 实现思路: 1.获取silde滑块(获取元素) 2.为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标的X坐标. 3.如何获取到鼠标的x坐标——使用clientX事件(当事件被触发时,鼠标指针的水平坐标). 4.鼠标移动事件发生后根据从最开始点击的X值到移动后的X值之差,作为滑块移动的差值———— 鼠标移动事件 (onmousemove): 5.获取鼠标移动之后的X坐标 6.获得初始X坐标和移动后X
-
js实现滑动滑块验证登录
本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下 1.html代码 <div class="box"> <!--滑块--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class=
-
js用拖动滑块来控制图片大小的方法
本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g
-
js canvas实现滑块验证
本文实例为大家分享了js canvas实现滑块验证的具体代码,供大家参考,具体内容如下 滑块验证 话不多说先上代码想用的小伙伴可以直接使用,想了解的我后面会说下我的思路 <template> <div class="sliderContent"> <div class="imgDev" :style="'width:' + width + 'px;'"> <canvas :id="id"
-
js实现拖动滑块效果
本文实例为大家分享了js如何拖动滑块的具体代码,供大家参考,具体内容如下 实现拖动滑块,先分析,滑块可以拖动应该改变滑块在页面中的坐标,那就采用定位拿到元素的 top 和 left 对它们进行赋值,接下来就是准备事件,既然是鼠标拖动应该具备 mousedown,mousemove,mouseup 三种事件,通过 mousedown 鼠标按下事件选中滑块,mousemove 事件拖动滑块,在拖动滑块的时候获取鼠标在可视窗口的坐标赋值给滑块的 top 和 left 具体代码实现 <!DOCTYPE
-
微信小程序实现登陆注册滑块验证
目录 一.创建自定义组件MoveVerify 二.在index页面使用 本文实例为大家分享了微信小程序实现登陆注册滑块验证的具体代码,供大家参考,具体内容如下 一.创建自定义组件MoveVerify MoveVerify.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { x: 0, oldx: 0, isOk: false,