MouseTracker/templates/index.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>拖动滑块验证</title>
</head>

<body>
  <style>
    #targetSlider {
      position: relative;
      display: block;
      background: #e8e8e8;
      width: 500px;
      height: 33px;
      border: 2px solid #e8e8e8;
    }

    #targetSlider input {
      position: absolute;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 33px;
      user-select: none;
      width: 500px;
    }

    #dragContainerTarget {
      position: relative;
      display: block;
      background: #e8e8e8;
      width: 500px;
      height: 33px;
      border: 2px solid #e8e8e8;
    }

    /* 滑动控件容器,灰色背景 */
    #dragContainer {
      position: relative;
      display: block;
      background: #e8e8e8;
      width: 500px;
      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;
      -webkit-user-select: none;
    }

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

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

    /* 滑块初始背景 */
    .dragHandlerBg {
      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==");
    }

    .dragHandlerOkBg {
      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==");
    }
  </style>

  <body>
    <div id="dragContainerTarget">
      <div id="dragTargetHandler" class="dragHandlerBg"></div>
    </div>

    <div id="dragContainer">
      <div id="dragTarget"></div>
      <div id="dragBg"></div>
      <div id="dragText"></div>
      <div id="dragHandler" class="dragHandlerBg"></div>
    </div>
    <div>
      <input type="text" id="inputDistance" value="50" />
    </div>
    <button id="submit" onclick="">提交</button>
    <div id="success" style="display: none;">
      <div style="background-color: #7ac23c; color: white; text-align: center; padding: 10px; border-radius: 5px;">
        数据上载成功
      </div>
    </div>
  </body>

  <script>
    let mouseData = [];
    let startTime = null;
    let startX = null;
    let startY = null;
    let dargX = null;
    let postMouseData = [];
    let dragStartX = 0;

    var dragContainer = document.getElementById("dragContainer");
    var dragContainerTarget = document.getElementById("dragContainerTarget");
    var dragBg = document.getElementById("dragBg");
    var dragText = document.getElementById("dragText");
    var dragHandler = document.getElementById("dragHandler");
    var dragTargetHandler = document.getElementById("dragTargetHandler");


    dragTargetHandler.style.left = 50 + "px";

    document.getElementById('inputDistance').addEventListener('input', function () {
      var inputDistance = parseInt(document.getElementById('inputDistance').value);
      dragTargetHandler.style.left = inputDistance + "px";
    });

    document.getElementById('submit').addEventListener('click', function () {
      var distance = parseInt(document.getElementById('inputDistance').value);
      var data = postMouseData;
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      var payload = {
        distance: distance,
        data: data
      };
      xhr.send(JSON.stringify(payload));
      document.getElementById("success").style.display = "block";
      setTimeout(() => {
        document.getElementById("success").style.display = "none";
      }, 1000);

      //刷新网页
      window.location.reload();
    });

    function sendMouseData(distance, data) {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      var payload = {
        distance: distance,
        data: data
      };
      xhr.send(JSON.stringify(payload));
      document.getElementById("success").style.display = "block";
      setTimeout(() => {
        document.getElementById("success").style.display = "none";
      }, 1000);
    }


    dragStartX = dragContainer.getBoundingClientRect().left;

    dragText.textContent = "拖动滑块验证";
    dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);

    function onRecordTrace(e) {
      if (startTime === null) {
        startTime = Date.now();
        startX = e.clientX;
        startY = e.clientY;
      }
      var currentTime = Date.now()
      let timeElapsed = currentTime - startTime;
      startTime = currentTime;
      let offsetX = e.clientX - startX;
      let offsetY = e.clientY - startY;
      mouseData.push([offsetX, offsetY, timeElapsed]);
    };

    function onDragHandlerMouseDown() {

      document.addEventListener("mousemove", onRecordTrace);
      document.addEventListener("mousemove", onDragHandlerMouseMove);
      document.addEventListener("mouseup", onDragHandlerMouseUp);
    }

    function onDragHandlerMouseMove() {
      if (dargX === null) {
        dargX = event.clientX
      }

      var offsetX = event.clientX - dargX;
      if (Math.abs(offsetX - parseInt(dragTargetHandler.style.left, 10)) < 1) {
        dragContainerTarget.style.background = '#7ac23c';
      } else {
        dragContainerTarget.style.background = '#e8e8e8';
      }
      dragHandler.style.left = offsetX + "px";
      dragBg.style.width = dragHandler.style.left;
    }

    function onDragHandlerMouseUp() {
      document.removeEventListener("mousemove", onRecordTrace);
      document.removeEventListener("mousemove", onDragHandlerMouseMove);
      document.removeEventListener("mouseup", onDragHandlerMouseUp);
      console.log(parseInt(document.getElementById('inputDistance').value));
      console.log(mouseData);
      console.log(mouseData[mouseData.length - 1]);
      postMouseData = mouseData;
      dragContainerTarget.style.background = '#e8e8e8';
      dragHandler.style.left = 0;
      dragBg.style.width = 0;
      startTime = null;
      mouseData = [];
      startX = null;
      startY = null;
    }
  </script>


</html>