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>
实现效果：
案例中所用到的小图标可以自行获取：
JS拖动滑块验证的更多相关文章
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
- js登录滑动验证，不滑动无法登陆
js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html; ...
- js移动端滑块验证解锁组件
本文修改自PC端的js滑块验证组件,PC端使用的是onmousedown,onmouseup,nomousemove.原文找不到了,也是博客园文章,在此感谢广大网友的生产力吧. 说下对插件和组件的理解 ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- [Android实例] 拖动滑块进行图片拼合验证方式的实现
该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...
随机推荐
- P4942小凯的数字
给定一个序列,如12345 56789 1011121314等,输出对其取余9的结果. 那么我们需要明白一个定理,一个序列对一个数的取余结果等于它各位之和取余那个数的结果.证明似乎是这样∑i=0na ...
- 版本控制器之SVN（一）
通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易引发BUG 难于追溯问题代码的修改人和修改时间 难 ...
- GitHub从小白到熟悉<二>
创建 仓库
- luogu P3320 [SDOI2015]寻宝游戏
大意:给定树, 要求维护一个集合, 支持增删点, 询问从集合中任取一点作为起点, 遍历完其他点后原路返回的最短长度. 集合中的点按$dfs$序排列后, 最短距离就为$dis(s_1,s_2)+...+ ...
- oa_mvc_easyui_后台布局(3)
1.新建HomeController控制器,并创建视图,后台的主页 2.easyUI的引用: <link href="~/Content/default/easyui.css" ...
- SQL--合计函数（Aggregate functions）:avg,count,first,last,max,min,sum
SQL--合计函数(Aggregate functions):avg,count,first,last,max,min,sum avg() 函数 定义和用法 AVG 函数返回数值列的平均值.NULL ...
- 07 Python爬虫验证码处理
大部分门户网站在进行登录的时候,如果用户连续登录的次数超过3次或者5次的时候,就会在登录页中动态生成验证码.通过验证码达到分流和反爬的效果. 一. 云打码平台处理验证码的流程: 1.对携带验证码的页面 ...
- vue项目-axios封装、easy-mock使用
vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...
- lftp连接异常情况分析过程
[问题现象]:通过rpm安装好lftp后,执行lftp huangmr:huangmr@192.168.107.132无法连接(lftp huangmr@192.168.107.132:~> l ...
- QString与QByteArray互相转换的方法
本文转载自http://blog.csdn.net/daa20/article/details/51674753 // QString转QByteArray方法 //Qt5.3.2 QString s ...