js-滑块拼图登录验证

一、为什么会有滑块登录验证

  很多网站为了防止机器人登录操作，往往会会添加一个滑块拼图验证，必须要拖拽拼成完整才能登录成功。

二、案例展示

  刷新页面，即可产生随机位置的两个方块，只有图片滑块滑倒空白方块附近才能算验证成功，可以设置允许有几像素的误差；离目标较远会自动返回。

三、具体实现代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .box {
          width: 533px;
          height: 300px;
          margin: 0 auto;
          position: relative;
      }

      .box .main {
          width: 100%;
          height: 100%;
          display: block;
      }

      .btn {
          width: 533px;
          height: 50px;
          margin: 0 auto;
          border: 1px #000 solid;
          position: relative;
      }

      .btn em {
          width: 40px;
          height: 40px;
          position: absolute;
          left: 0;
          top: 5px;
          background: #aaa;
      }
  </style>
</head>

<body>
  <div class="box">
      <img class="main" src="./images/1.jpg" alt="" srcset="">
  </div>
  <div class="btn">
      <em></em>
  </div>
</body>
<script src="./move.js"></script>
<script>
  class tz {
      *constructor() {
          this.btnSpan = document.querySelector('.btn em');
          this.box = document.querySelector('.box');
          this.init();
      }*
      init() {*
          // 产生随机top值
          this.top = randomNum(0,this.box.offsetHeight-this.btnSpan.offsetHeight);
          // 产生随机left值
          this.left = randomNum(this.box.offsetWidth/2,this.box.offsetWidth-this.btnSpan.offsetWidth);
          //循环创建两个随机位置的方块，top值一致
          for(var i = 0;i<2;i++){
              *this.createSmall(i);
          }
          *this.span = document.querySelectorAll('.box span');
          *this.btnSpan.onmousedown = (eve) => {
             * var e = eve || event;
              *this.obj = {
                  x: e.offsetX,
                 * y: e.offsetY
              }
              this.move();
              this.up();
          }
      }
      move() {
          document.onmousemove = (eve) => {
              var e = eve || event;
              this.l = e.pageX - this.box.offsetLeft - this.obj.x;
              if (this.l < 0) this.l = 0;
              if (this.l >= this.box.offsetWidth - this.btnSpan.offsetWidth) {
                  this.l = this.box.offsetWidth - this.btnSpan.offsetWidth-1;
              }               
              this.span[1].style.left = this.l + 'px';
              this.btnSpan.style.left = this.l + 'px';
              return false;
          }
      }
      up() {
          document.onmouseup = (eve) => {
              if(this.l<this.span[0].offsetLeft || this.l>this.span[0].offsetLeft+3){
                  move(this.btnSpan,{left:0});
                  move(this.span[1],{left:0});
              }
              document.onmousemove = null;
              document.onmouseup = null;
          }
      }
      createSmall(i){
          var span = document.createElement('span');
          span.style.cssText = `width:40px;height:40px;position:absolute;top:${this.top}px;overflow:hidden`;
          // overflow:hidden;
          if(i==1){
              span.style.left = 0 + 'px';
              span.style.zIndex ='2';
              var img = document.createElement('img');
              img.src = './images/1.jpg';
              img.style.cssText = `position:absolute;left:${-this.left}px;top:${-this.top}px;`;
              span.appendChild(img);
          }else{
              span.style.left = this.left + 'px';
              span.style.background = 'rgba(255,255,255)';
          }
          this.box.appendChild(span);
      }
  }
  new tz;
  function randomNum(min, max) {
      if (min > max) {
          var t = max;
          max = min;
          min = t;
      }
      return Math.floor(Math.random() * (max - min + 1) + min);
  }
</script>

</html>
posted @ 2020-06-15 10:34  飘逸_winxin  阅读(1919)  评论(0)  编辑  收藏  举报