JavaScript to implement login slider verification

This article example shares the specific code of JavaScript to implement login slider verification for your reference. The specific content is as follows

HTML code

<div class="login-select">
    <div v-show="errselectFlag" id="err-select"></div>
        <p id="title-p">Press and hold the slider and drag to verify</p>
        <div id="left-select"></div>
        <div id="right-select">
        <i id="icon-dui" class="iconfont icon-right"></i>
    </div>
</div>

JavaScript code

// Slider validation var oRight = document.getElementById("right-select");
var bg = document.getElementById("left-select");
var title = document.getElementById("title-p");
var i = document.getElementById("icon-dui");
    oRight.onmousedown = function (e) {
      var downX = e.clientX; //The x-axis distance from the window after pressing the button // Mouse movement event oRight.onmousemove = function (e) {
        if (e.clientX != 240) {
          oRight.style.left = 0 + "px";
          bg.style.left = 0 + "px";
        }
        var moveX = e.clientX - downX; //The distance from the x-axis of the window when sliding //Drag only when it is greater than 0, otherwise reverse drag will occur if (moveX > 0) {
          oRight.style.left = moveX + "px"; //The distance between the slider and the left bg.style.width = moveX + "px"; //The width of the background is the distance between the slider and the left if (moveX >= 280 - oRight.offsetWidth) {
            i.className = "iconfont icon-xingzhuang";
            i.style.color = "rgb(86, 192, 15)";
            title.innerText = "Verification passed";
            title.style.color = "#fff";
            oRight.onmousemove = null;
            oRight.onmousedown = null;
          }
        }
      };
    };

style code

Note: The style is a sass file

*{margin: 0;padding: 0;box-sizing: border-box;}
    .login-select {
      width: 280px;
      height: 40px;
      margin: auto;
      margin-top: 20px;
      margin-left: 15px;
      margin-right: 15px;
      text-align: center;
      line-height: 40px;
      background: rgba(134, 134, 131, 0.6);
      display: flex;
      position: relative;
      #err-select {
        width: 138px;
        height: 38px;
        position: absolute;
        right: -152px;
        top: 0;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        line-height: 38px;
        text-align: center;
        background: rgb(177, 71, 71);
      }
      #title-p {
        text-align: center;
        line-height: 40px;
        width: 100%;
        height: 100%;
        font-size: 14px;
        position: absolute;
      }
      #left-select {
        width: 0;
        height: 100%;
        transform: translate(0.3s);
        background: rgb(86, 192, 15);
      }
      #right-select {
        width: 40px;
        height: 40px;
        background: #fff;
        color: #aaaa;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
        position: absolute;
        cursor: move;
      }
    }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements drag slider verification
JavaScript Slider Validation Case
JavaScript to implement slider verification code
JavaScript implements the drag slider puzzle verification function (html5, canvas)
js canvas realizes slider verification
js implements sliding slider to verify login
Native JS encapsulation drag verification slider implementation code example
Implementation of JS reverse engineering of iQiyi slider encryption

<<: Detailed explanation of Bind mounts for Docker data storage

>>: Docker data storage tmpfs mounts detailed explanation