前端使用滑块滑动进行验证的思路

摸鱼真滴快乐

已于 2022-07-08 08:59:31 修改

阅读量3.4k

点赞数 3

文章标签：大数据前端 javascript

于 2022-07-07 17:30:34 首次发布

本文链接：https://blog.csdn.net/m0_61790229/article/details/125662449

版权

今天研究了一下前端需要注册或者发送验证码之前等这些场景时，往往会用到的一个简单的滑块滑动验证，用于区分是否是真人用户，下面就来简单介绍一下这个思路。

下面就是一个简单的demo：

其中HTML和css样式如下：

<body>
  <!-- 整个大容器，可以忽略，方便定位用 -->
  <div class="container">
    <!-- 滑块的容器 -->
    <div class="bn-container"></div>
    <!-- 滑动时遮盖的颜色容器 -->
    <div class="coverBG"></div>
    <!-- 提示文本，层级在滑块容器和颜色容器之上 -->
    <div class="tip">滑动以进行验证</div>
    <!-- 滑块 -->
    <div class="slider">>>></div>
  </div>
</body>

<style>
    .container {
      position: relative;
      width: 350px;
      height: 200px;
      border: 1px solid rgb(204, 203, 203);
      margin: 100px auto;
    }
    .bn-container {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 40px;
      background-color: rgb(218, 214, 214);
    }
    .coverBG {
      position: absolute;
      left: 2px;
      bottom: 2px;
      width: 0px;
      height: 36px;
      background-color: rgb(42, 235, 51);
    }
    .tip {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      /* 文本不允许选中 */
      user-select: none;
      -webkit-user-select: none;
    }
    .slider {
      position: absolute;
      left: 2px;
      bottom: 2px;
      width: 45px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background-color: #fff;
      cursor: move;
      /* 文本不允许选中 */
      user-select: none;
      -webkit-user-select: none;
    }
  </style>

接下来就是js的实现部分了：

首先我们需要计算出滑块可以滑动的最大距离，这一点非常简单，只需要让滑块容器的宽度减去滑块的宽度就ok了，哦~，同时还需要设置一个变量记录一下初始时鼠标按下的位置，方便后续的计算。

let bnContainer = document.querySelector('.bn-container')
let coverBG = document.querySelector('.coverBG')
let tip = document.querySelector('.tip')
let slider = document.querySelector('.slider')

// 获取滑块的最大偏移量
let maxOffset = bnContainer.offsetWidth - slider.offsetWidth;
// 标记是否验证成功
let isSuccess = false;
// 记录鼠标初始按下滑块时的位置
let startX;

之后就需要开始对滑块添加一个鼠标按下的事件，同时需要在按下事件里添加document的移动和松开事件。

注意我们给滑块添加按下事件是需要按下滑块做为触发整个事件，而给document添加移动和松开事件而不是继续给滑块slider添加是为了让滑动时鼠标移出的滑块的范围时也能很好响应，体验较好，不然鼠标一不小心跑出范围了就没法继续滑动，体验极差，还会有一些问题。（大家感兴趣的可以修改监听事件源为slider试一下，用起来很难受。）

  // 开启滑块的鼠标按下监听事件
  slider.addEventListener('mousedown',mousedownEvent)

  function mousedownEvent(e) {
    startX = e.clientX;
    // 给document绑定移动松开事件可以让滑动过快滑出滑块的范围时也能响应
    // 开启鼠标移动监听事件
    document.addEventListener('mousemove',mousemoveEvent)
    // 开启鼠标松开监听事件
    document.addEventListener('mouseup',mouseupEvent)
  }

而在鼠标移动事件里就需要修改滑块和颜色遮罩层的定位里left的偏移值，实现滑动的效果；并且还要对这个变化距离作出限制，防止滑出容器。

对于滑动时不断变化的滑块距离容器左侧changeLeft，因为我们已经在前面记录下了初始按下时距离浏览器左侧的水平位置距离startX，所以直接用滑动时变化的e.clientX一减就计算出来了。

  function mousemoveEvent(e) {
    // 计算出滑块的左侧不断变化的距离
    let changeLeft = e.clientX - startX;
    // console.log(changeLeft);
    // 对滑块偏移位置进行限制
    if ( changeLeft < 0) {
      changeLeft = 0;
    } 
    if (changeLeft > maxOffset ) {
      changeLeft = maxOffset;
      isSuccess = true;
      // 验证成功的回调
      successEvent()
    }
    // 进行赋值
    slider.style.left = changeLeft + 'px';
    coverBG.style.width = changeLeft + 'px';
  }

只要滑块一移动到末尾，就触发验证成功的回调。对于验证成功后的逻辑，大家就按自己的需求来吧。

  // 成功的函数，在此进行验证成功的逻辑
  function successEvent() {
    tip.innerHTML = "验证成功";
    tip.style.color = 'skyblue';
    console.log('验证成功');
    // TODO: 验证成功的逻辑
  }

当然也有可能一次验证没有成功。而鼠标松开事件里我们就需要查看之前设置的是否成功的标记，没有验证成功就需要让滑块和颜色遮罩回到初始位置。

注意！！！在这里需要移除移动和松开的事件，不然绑定的这两个事件会严重干扰我们的第二次验证。

  function mouseupEvent() {
    // 松开时没有验证成功，滑块退回起点
    if (isSuccess == false) {
      slider.style.left = 0 + 'px';
      coverBG.style.width = 0 + 'px';
      
    }
    // 同时移除移动和松开的事件，否则会影响二次滑动
    document.removeEventListener('mousemove', mousemoveEvent);
    document.removeEventListener('mouseup', mouseupEvent);
  }

好耶~~~，至此，整个滑块验证的逻辑就讲完啦。感谢大家看到最后（点赞啊靓仔）。如果大家有什么问题或建议，也欢迎踊跃发言~

对于滑动图片进行验证的方式本人也在学习中，待我学会了再来与大家分享哦。