JavaScript 手写拖动滑块验证 - 简单实现代码示例

以下是一个简单的示例，演示如何手写拖动滑块验证：

HTML代码：

<div id='slider'>
  <div id='sliderBlock'></div>
</div>

CSS样式：

#slider {
  width: 300px;
  height: 40px;
  background-color: #ccc;
  position: relative;
  cursor: pointer;
}

#sliderBlock {
  width: 100px;
  height: 40px;
  background-color: #888;
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
}

JavaScript代码：

var slider = document.getElementById('slider');
var sliderBlock = document.getElementById('sliderBlock');

var isDragging = false;
var startX = 0;
var sliderWidth = slider.offsetWidth - sliderBlock.offsetWidth;

sliderBlock.addEventListener('mousedown', startDragging);
sliderBlock.addEventListener('mousemove', dragSlider);
sliderBlock.addEventListener('mouseup', stopDragging);
sliderBlock.addEventListener('mouseleave', stopDragging);

function startDragging(e) {
  isDragging = true;
  startX = e.clientX - sliderBlock.offsetLeft;
}

function dragSlider(e) {
  if (isDragging) {
    var newX = e.clientX - startX;
    if (newX >= 0 && newX <= sliderWidth) {
      sliderBlock.style.left = newX + 'px';
      if (newX === sliderWidth) {
        // 滑块已经拖动到最右边，验证通过
        console.log('验证通过');
      }
    }
  }
}

function stopDragging() {
  isDragging = false;
}

这段代码创建了一个滑块验证的功能。当滑块被拖动到最右边时，会在控制台输出'验证通过'。你可以根据需要对验证通过的逻辑进行进一步的处理。