JavaScript 手写拖动滑块验证（单位rem）
以下是一个手写的拖动滑块验证的示例代码，单位使用rem：
<!DOCTYPE html>
<html>
<head>
<title>拖动滑块验证</title>
<style>
.slider-container {
width: 300px;
height: 40px;
background-color: #f0f0f0;
position: relative;
}
.slider-bar {
width: 100%;
height: 100%;
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
}
.slider-handle {
width: 40px;
height: 40px;
background-color: #999;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class='slider-container'>
<div class='slider-bar'></div>
<div class='slider-handle'></div>
</div>
<script>
var sliderContainer = document.querySelector('.slider-container');
var sliderBar = document.querySelector('.slider-bar');
var sliderHandle = document.querySelector('.slider-handle');
var isDragging = false;
var startX = 0;
var sliderContainerWidth = sliderContainer.offsetWidth;
var sliderHandleWidth = sliderHandle.offsetWidth;
sliderHandle.addEventListener('mousedown', handleDragStart);
sliderHandle.addEventListener('touchstart', handleDragStart);
function handleDragStart(event) {
event.preventDefault();
isDragging = true;
startX = event.pageX || event.touches[0].pageX;
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', handleDragEnd);
document.addEventListener('touchmove', handleDrag);
document.addEventListener('touchend', handleDragEnd);
}
function handleDrag(event) {
if (!isDragging) {
return;
}
var moveX = event.pageX || event.touches[0].pageX;
var offsetX = moveX - startX;
var maxOffsetX = sliderContainerWidth - sliderHandleWidth;
if (offsetX < 0) {
offsetX = 0;
} else if (offsetX > maxOffsetX) {
offsetX = maxOffsetX;
handleDragEnd(event);
// 验证成功，可以在这里执行相应的逻辑
console.log('验证成功');
}
sliderHandle.style.left = offsetX / sliderContainerWidth * 100 + '%';
}
function handleDragEnd(event) {
isDragging = false;
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('mouseup', handleDragEnd);
document.removeEventListener('touchmove', handleDrag);
document.removeEventListener('touchend', handleDragEnd);
}
</script>
</body>
</html>
以上代码实现了一个简单的拖动滑块验证功能。通过监听鼠标或触摸事件，计算滑块的偏移量，当滑块的偏移量达到最大值时，即认为验证成功。可以根据实际需求修改样式和验证逻辑。
原文地址: https://www.cveoy.top/t/topic/qlyw 著作权归作者所有。请勿转载和采集!