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

滑块验证

效果如下：

结合当前流行的验证方法：滑块验证，图片滑块验证，验证码验证等...

今天的练习:滑块验证的目的是原生JavaScript复习巩固网页交互，废话少说，上代码:

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 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+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'
  }
}