【js】使用js实现滑块验证码功能

效果图：

实现思路：

根据滑块的最左侧点跟最右侧点，是否在规定的距离内【页面最左侧为原点】，来判断是否通过

html代码：

<!DOCTYPE html>
<html>

<head>
  <title>滑动图片验证码</title>
  <style>
    .captcha-container {
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

    #captcha-image {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f2f2f2;
      background-image: url('./img/text.png');
      background-size: cover;
    }

    #slider {
      position: absolute;
      top: 48%;
      left: 0;
      transform: translateY(-50%);
      width: 80px;
      height: 80px;
      background-color: #007bff;
      border-radius: 50%;
      cursor: pointer;
      z-index: 999;
    }
  </style>
</head>

<body>
  <div class="captcha-container">
    <div id="captcha-image"></div>
    <div id="slider"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./js/captcha.js"></script>
</body>

</html>

js代码：

$(document).ready(function() {
    var isDragging = false; // 判断是否正在拖动滑块
    var slider = $("#slider");
    var captchaContainer = $(".captcha-container");
    var captchaWidth = captchaContainer.width();
    var maxOffset = captchaWidth - slider.width(); // 滑块最大可移动距离
  
    // 鼠标按下触发
    slider.mousedown(function(e) {
      isDragging = true;
    });
  
    // 鼠标移动触发
    $(document).mousemove(function(e) {
        // 判断是否可以拖动
      if (isDragging) {
        // e.pageX 是鼠标当前所在位置相对于整个文档（document）左侧的水平位置
        // captchaContainer.offset().left 是容器左侧边界相对于文档左侧的水平位置。
        var leftOffset = e.pageX - captchaContainer.offset().left; 
        // console.log(e.pageX,captchaContainer.offset().left)
        if (leftOffset >= 0 && leftOffset <= maxOffset) {
          slider.css("left", leftOffset);
        }
      }
    });
  
    // 鼠标释放触发
    $(document).mouseup(function(e) {
      if (isDragging) {
        var captchaPassed = false; // 是否通过验证的标志
        var leftOffset = e.pageX - captchaContainer.offset().left; // 滑块距离容器左侧距离
        if (leftOffset >= 195 && leftOffset <= 280) { //滑块要到达的目标位置
          captchaPassed = true;
        }
  
        if (captchaPassed) {
          // 验证通过，执行你的相关操作
          console.log("验证码验证通过！");
        } else {
          // 验证失败，重置滑块位置
          console.log("验证码验证失败！");
          slider.animate({ left: 0 }, 200);
        }
  
        isDragging = false;
      }
    });
  });

注解：图片需要自己放一张，然后滑块验证的距离通过下面代码规定：

if (leftOffset >= 195 && leftOffset <= 280) { //滑块要到达的目标位置
      xxxxxxx
}

【js】使用js实现滑块验证码功能

效果图：

实现思路：

html代码：

js代码：

猜你喜欢