JavaScript滑动验证功能实现详细代码
更新时间：2024年06月13日 11:08:02 作者：俩碗螺蛳粉
这篇文章主要给大家介绍了关于JavaScript滑动验证功能实现的相关资料,滑动拼图验证功能是一种常见的网站人机验证方法,旨在防止恶意机器人或自动化程序对网站进行恶意攻击,需要的朋友可以参考下
功能需求：（图片可根据自行更换）
1.、右侧标签的位置是随机生成，左侧标签和右侧标签的垂直位置是一致的，
2、通过滑动条控制左侧标签与右侧标签重叠（误差控制在2px）表示验证通过，
3、否则验证失败，重新生成随机位置。
一、效果展示
·效果示例图
二、代码区域
2.1 核心代码区域
鼠标按下滑块时，需要获取鼠标在当前页面的坐标，以及判断滑块的移动范围。
// 鼠标按下滑块
liElement.onmousedown = function (e) {
rx = e.pageX - wrap.offsetLeft;
var mx = containerWidth - liElement.offsetWidth;
isDown = true;//鼠标按下
// 鼠标在页面移动
document.onmousemove = function (event) {
// 计算出滑块的位置(鼠标在页面的坐标 减去 鼠标在滑块的坐标)
// x = event.pageX - rx - liElement.offsetWidth + cx;
x = event.pageX - rx - liElement.offsetWidth;
// 判断是否超出滑动范围
if (x <= 0) x = 0;
if (x >= mx) x = mx;
// 设置滑块的位置
liElement.style["left"] = x + "px";
divElement.style["width"] = x + "px";
// 设置红色标签的位置
red_x = red_cur_X + x;
console.log("red_x:", red_x);
if (red_x >= (containerWidth - red.offsetWidth)) red_x = containerWidth - red.offsetWidth
red.style["left"] = red_x + "px";
}
}鼠标在页面松开时，判断滑块是否到达缺口的检测范围内，误差为2px。
// 鼠标在页面松开
document.onmouseup = function () {
// 解绑鼠标移动事件
document.onmousemove = null;
// cx = x;
//判断鼠标是否按下滑块
if (isDown) {
// 检查红色和绿色标签的位置
// console.log("红色盒子的X位置:",red_x);
// console.log("绿色盒子的X位置:",green_x);
// 判断是否验证通过
if (red_x <= (green_x + 2) && red_x >= (green_x - 2)) {
alert("验证成功！")
console.log("验证通过！");
}
else {
console.log("验证失败~~");
alert("验证失败~~");
// 刷新页面
window.location.reload();
}
}
// 重置布尔值
isDown = false;
}2.2详细代码区域
2.2.1css代码
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrap {
width: 600px;
height: 460px;
margin: 50px;
}
.wrap-container {
width: 600px;
height: 400px;
background-color: #ccc;
/* 相对定位 */
position: relative;
}
.wrap-container .bg {
width: 600px;
height: 400px;
background-image: url(./images/1.jpg);
background-size: cover;
}
.wrap-container .box {
width: 80px;
height: 80px;
position: absolute;
top: 50px;
box-shadow: 0px 0px 2px #fff;
}
.wrap-container .red {
background-color: red;
left: 0;
/* 层级 */
z-index: 1000;
background-repeat: no-repeat;
}
.wrap-container .green {
background-color: rgba(255, 255, 255, .5);
left: 200px;
}
.wrap-side {
width: 598px;
height: 48px;
background-color: #fff;
margin-top: 10px;
position: relative;
border: 1px solid #ccc;
}
.wrap-side p {
color: #666;
text-align: center;
line-height: 50px;
/* 禁止选择文本 */
user-select: none;
}
.wrap-side ul {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 50px;
}
.wrap-side ul li {
width: 50px;
height: 50px;
background-color: #1890FF;
cursor: move;
position: absolute;
left: 0px;
top: 0;
text-align: center;
line-height: 50px;
}
.wrap-side ul li::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-top: 2px solid #fff;
/* 旋转属性 */
transform: rotate(45deg);
/* 垂直对齐 */
vertical-align: middle;
}
.wrap-side div {
width: 0px;
height: 50px;
background-color: rgba(0, 191, 255, .5);
position: absolute;
left: 0px;
top: 0;
}
</style>2.2.2 html代码
<div class="wrap">
<div class="wrap-container">
<div class="bg" style="background-image: url(./images/1.jpg);"></div>
<div class="box red"></div>
<div class="box green"></div>
</div>
<div class="wrap-side">
<p>向右滑动</p>
<!-- 滑动条 -->
<ul>
<li></li>
</ul>
<!-- 滑动经过的地方设置背景 -->
<div></div>
</div>
</div>2.2.3 JS代码
存放照片的数组中的照片路径用户可根据自己存放的路径进行修改（建议选择尺寸一致的照片）。
// 1. 获取页面相关的元素
var wrap = document.querySelector(".wrap");
var wrapContainer = document.querySelector(".wrap-container");
var bg = document.querySelector(".wrap-container .bg");
var red = document.querySelector(".wrap-container .red");
var green = document.querySelector(".wrap-container .green");
var liElement = document.querySelector(".wrap-side ul li");
var divElement = document.querySelector(".wrap-side div");
// 采用数组记录图片路径
var arr = [
'.\/images\/1.jpg',
'.\/images\/2.jpeg',
'.\/images\/3.jpg',
'.\/images\/4.jpg',
'.\/images\/5.jpg',
'.\/images\/6.jpeg',
]
// 2. 封装函数 生成随机数
var getRdNum = function (min, max) {
// 获取指定范围的随机数
return Math.floor(Math.random() * (max - min) + min);
}
// 3. 记录滑动所需的数据
// 记录.wrap标签的在页面的位置
var oLeft = wrap.offsetLeft;
var oTop = wrap.offsetTop;
// 记录.wrap-container标签的尺寸
var containerWidth = wrapContainer.offsetWidth;
var containerHeight = wrapContainer.offsetHeight;
// 记录绿色标签和红色标签的位置范围
// var min_slide_X = 0;
var min_slide_X = containerWidth / 2;
var max_silde_X = containerWidth - green.offsetWidth;
var min_slide_Y = 0;
var max_silde_Y = containerHeight - green.offsetHeight;
// 记录红色标签可滑动的范围
var red_slide_X = containerWidth - red.offsetWidth;
// 封装函数 获取绿色标签的随机的位置
var getPos = function () {
// 返回坐标
return {
x: getRdNum(min_slide_X, max_silde_X),
y: getRdNum(min_slide_Y, max_silde_Y),
x0: getRdNum(0, min_slide_X - red.offsetWidth)// 红色标签的水平位置
}
}
// 封装函数 设置绿色/红色盒子的位置
var setPos = function () {
var point = getPos();
green.style['left'] = point.x + "px";
green.style['top'] = point.y + "px";
red.style['left'] = point.x0 + "px";
red.style['top'] = point.y + "px";
// 选择.green标签区域对应的图片
// 随机的索引值
var index = Math.floor(Math.random() * arr.length);
var path = `url(${arr[index]})`;
// 设置背景图
bg.style['backgroundImage'] = path;
red.style['backgroundImage'] = path;
// 计算出截取的部分图片
var posX = point.x;
var posY = point.y;
// 设置.red标签的背景图位置
red.style['backgroundPosition'] = `-${posX}px -${posY}px`;
}
setPos();
// 记录红色标签当前的位置
var red_cur_X = parseInt(getComputedStyle(red)['left']);
// 设置滑动条
// 记录滑块的位置
var x = 0;
// 记录鼠标在滑块中的位置
var rx = 0;
// 记录滑块当前位置
// var cx = 0;
// 记录红色盒子的位置(和绿色盒子的位置进行判断)
var red_x = 0;
// 记录绿色盒子的位置(获取初始值即可)
var green_x = parseInt(getComputedStyle(green)['left']);
// 定义布尔值 判断鼠标是否按下
var isDown = false;
// 鼠标按下滑块
liElement.onmousedown = function (e) {
rx = e.pageX - wrap.offsetLeft;
var mx = containerWidth - liElement.offsetWidth;
isDown = true;//鼠标按下
// 鼠标在页面移动
document.onmousemove = function (event) {
// 计算出滑块的位置(鼠标在页面的坐标 减去 鼠标在滑块的坐标)
// x = event.pageX - rx - liElement.offsetWidth + cx;
x = event.pageX - rx - liElement.offsetWidth;
// 判断是否超出滑动范围
if (x <= 0) x = 0;
if (x >= mx) x = mx;
// 设置滑块的位置
liElement.style["left"] = x + "px";
divElement.style["width"] = x + "px";
// 设置红色标签的位置
red_x = red_cur_X + x;
console.log("red_x:", red_x);
if (red_x >= (containerWidth - red.offsetWidth)) red_x = containerWidth - red.offsetWidth
red.style["left"] = red_x + "px";
}
}
// 鼠标在页面松开
document.onmouseup = function () {
// 解绑鼠标移动事件
document.onmousemove = null;
// cx = x;
//判断鼠标是否按下滑块
if (isDown) {
// 检查红色和绿色标签的位置
// console.log("红色盒子的X位置:",red_x);
// console.log("绿色盒子的X位置:",green_x);
// 判断是否验证通过
if (red_x <= (green_x + 2) && red_x >= (green_x - 2)) {
alert("验证成功！")
console.log("验证通过！");
}
else {
console.log("验证失败~~");
alert("验证失败~~");
// 刷新页面
window.location.reload();
}
}
// 重置布尔值
isDown = false;
}
三、个人总结
实现该功能运用了鼠标点击事件及鼠标松开事件，其中需要滤清如何获取滑块在照片中的位置以及如何将底部滑块与左侧滑块的坐标相联系，这是此案例的关键所在。
到此这篇关于JavaScript滑动验证功能实现的文章就介绍到这了,更多相关JS滑动验证实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解Javacript和AngularJS中的Promises
这篇文章主要介绍了详解Javacript和AngularJS中的Promises的相关资料,promise是Javascript异步编程很好的解决方案。，需要的朋友可以参考下2016-02-02
$$()函数应用实例...2006-10-10
这篇文章主要介绍了javascript实现点击单选按钮链接转向对应网址的方法,涉及javascript鼠标事件及页面跳转的相关技巧,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了怎样在删除前添加确认弹出框?下面小编带大家来学习一下2019-05-05
用户登录时,后端会返回一个token,并且保存到浏览器的localstorage中,可以根据localstorage中的token判断用户是否登录,所以当发送请求时,都要携带token给后端进行判断,本文给大家介绍了Axios设置token请求头的三种方式,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了关于js获取浏览器地址（获取第1个斜杠后的内容）的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
使用了layui自带的导出功能后,真的是超级便捷,下面这篇文章主要给大家介绍了关于layui导出Excel表格的方法代码,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
取变量的Boolean值2008-12-12
无感刷新机制的目的是在用户不知情的情况下,自动更新其认证令牌本文,主要介绍了js实现无感刷新的实践(附前后端实现),具有一定的参考价值,感兴趣的可以了解一下2024-04-04
这篇文章主要介绍了Bootstrap网格系统偏移列和嵌套列的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论