原生Js常见业务练习（1）—— 滑块验证

最新推荐文章于 2022-10-17 23:30:55 发布

JV_32

最新推荐文章于 2022-10-17 23:30:55 发布

阅读量693

点赞数 8

本文链接：https://blog.csdn.net/m0_53375764/article/details/125746688

版权

文章目录

滑块验证

滑块验证

效果如下：

结合当下流行的验证方式：滑块验证、图片滑块验证、验证码验证等...

今日份练习：滑块验证，旨在对原生JavaScript网页交互进行复习与巩固，废话不多说，上代码：

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider validation</title>
    <link rel="stylesheet" href="./css/Slider_validation.css">
</head>

<body>
    <div id="dragContainer">    <!--滑块验证容器 -->
        <div id="dragBg"></div>     <!--滑块左侧部分 -->
        <div id="dragText"></div>       <!--容器文本 -->
        <div id="dragHandler" class="dargHandlerBg"></div>      <!--滑块 -->
    </div>
    <script src="./js/Slider_validation.js"></script>
</body>

</html>

css部分

/* 滑块验证容器 */
#dragContainer {
    position: relative;
    display: inline-block;    /* 转行内块元素 */
    background: #e8e8e8;
    width: 300px;
    height: 33px;
    border: 2px solid #e8e8e8;
}

/* 滑块左侧部分绿色背景 */
#dragBg {
    position: absolute;
    background-color: #7ac23c;
    width: 0px;
    height: 100%;
}

/* 滑块验证容器文字 */
#dragText {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 33px;
    /* 文字不允许选中 */
    user-select: none;
}

#dragHandler {
    position: absolute;
    width: 40px;
    height: 100%;
    cursor: move;
}

/* 滑块初始化背景 */
.dargHandlerBg {
    background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
}

/* 滑块成功时的背景 */
.dargHandlerOkBg {
    background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
}

JavaScript部分

window.onload = function () {
  let dragContainer = document.querySelector('#dragContainer')
  let dragBg = document.querySelector('#dragBg')
  let dragText = document.querySelector('#dragText')
  let dragHandler = document.querySelector('#dragHandler')
  // 滑块最大偏移量 = 滑块验证容器长度 - 滑块长度
  let maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth
  // 是否验证成功标记
  let isVertifySuccess = false
  initDrag()
  function initDrag() {
    dragText.textContent = '拖动滑块验证'
    // 滑块设置鼠标按下监听
    dragHandler.addEventListener('mousedown', onDragHandlerDown)
  }
  
  function onDragHandlerDown() {
    document.addEventListener('mousemove', onDragHandlerMove)
    document.addEventListener('mouseup', onDragHandlerUp)
  }

  function onDragHandlerMove(e) {
    // clientX 属性返回鼠标指针的水平坐标（根据当前窗口）
    let left = e.clientX - dragHandler.clientWidth / 2
    if (left < 0) {
      left = 0
    } else if (left > maxHandlerOffset) {
      left = maxHandlerOffset
    }
    dragHandler.style.left = left + 'px'
    dragBg.style.width = dragHandler.style.left
  }

  function onDragHandlerUp(e) {
    document.removeEventListener('mousemove', onDragHandlerMove)
    let left = e.clientX - dragHandler.clientWidth / 2
    if (left >= maxHandlerOffset) {
      vertifySuccess()
    } else {
      // 初始化滑块移动量
      dragHandler.style.left = 0
      dragBg.style.width = 0
    }
  }

  // 验证成功
  function vertifySuccess() {
    isVertifySuccess = true
    dragText.textContent = '验证通过'
    dragText.style.color = 'white'
    dragHandler.setAttribute('class', 'dargHandlerOkBg')
    dragHandler.removeEventListener('mousedown', onDragHandlerDown)
    document.removeEventListener('mousemove', onDragHandlerMove)
    document.removeEventListener('mouseup', onDragHandlerUp)
    // 设置跳转
    window.location.href =
      'https://blog.csdn.net/m0_53375764?spm=1000.2115.3001.5343'
  }
}