JavaScript滑动验证功能实现详细代码
作者：俩碗螺蛳粉
这篇文章主要给大家介绍了关于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滑动验证实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！