滑动验证码（也叫做滑动拼图验证码）是一种用户交互形式的验证码，通常用于网页或移动应用的登录、注册或敏感操作。其基本原理是用户需要将一个滑块拖动到正确的位置以完成验证。
下面是一个使用原生JavaScript和HTML实现的简单滑动验证码的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动验证码示例</title>
<style>
#captcha {
position: relative;
width: 300px;
height: 40px;
border: 1px solid #13cbb9;
margin: 50px;
border-radius: 6px;
}
#captchaImg{
position: absolute;
width: 100%;
height: 100%;
background-color: #f5f5f5; /* 初始背景色 */
transition: background-color 0.3s ease; /* 平滑过渡效果 */
display: flex;
justify-content: center;
align-items: center;
}
#captcha img {
width: 100%;
height: 100%;
}
#slider {
border-radius: 4px;
position: absolute;
width: 50px;
height: 40px;
background-color: #13cbb9;
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
}
#slider .ico{
color: #fff;
line-height: 40px;
text-align: center;
font-size: 22px;
}
#sucessTxt{
color: #13cbb9;
display: none;
}
</style>
</head>
<body>
<div id="captcha">
<div id="captchaImg">
<span id="sucessTxt">✓ 验证成功</span>
</div>
<!-- <img id="captchaImg" src="captcha-image.jpg" alt="Captcha Image"> -->
<div id="slider">
<span class="ico">»</span>
</div>
</div>
<script>
const captchaImg = document.getElementById('captchaImg');
const slider = document.getElementById('slider');
const captchaContainer = document.getElementById('captcha');
const sucessTxt = document.getElementById('sucessTxt');
let sliderStartPosition = 0;
let sliderEndPosition = 250; // 假设滑块需要滑动的距离是250px
let isDragging = false;
slider.addEventListener('mousedown', (e) => {
isDragging = true;
sliderStartPosition = e.clientX - slider.offsetLeft;
});
window.addEventListener('mouseup', () => {
isDragging = false;
checkSliderPosition();
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const newSliderPosition = e.clientX - sliderStartPosition;
const sliderPercentage = newSliderPosition / sliderEndPosition; // 计算滑块移动的百分比
const bgColor = `rgba(19,203,185, ${1-sliderPercentage})`; // 根据百分比计算背景色，这里使用白色透明度变化
//captchaImg.style.backgroundColor = bgColor; //
if (newSliderPosition < 0) {
slider.style.left = '0px';
captchaImg.style.backgroundColor = '#f5f5f5';
sucessTxt.style.display = `none`
} else if (newSliderPosition > sliderEndPosition) {
slider.style.left = `${sliderEndPosition}px`;
captchaImg.style.backgroundColor = 'rgba(19,203,185, 0)';
} else {
slider.style.left = `${newSliderPosition}px`;
sucessTxt.style.display = `none`
}
});
function checkSliderPosition() {
const sliderCurrentPosition = parseInt(window.getComputedStyle(slider).left, 10);
if (sliderCurrentPosition >= sliderEndPosition) {
//alert('验证成功！');
// TODO: 发送请求到后端验证滑块位置，并处理后续逻辑
captchaImg.style.backgroundColor = 'rgba(19,203,185,.1)';
sucessTxt.style.display = `block`
// resetCaptcha();
} else {
slider.style.left = '0px'; // 重置滑块位置
}
}
function resetCaptcha() {
// TODO: 加载新的验证码图片，并重置滑块位置等
captchaImg.src = 'new-captcha-image.jpg'; // 假设这是新的验证码图片URL
slider.style.left = '0px';
}
</script>
</body>
</html>
评论: