JavaScript实现登录滑块验证

本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容如下

htML代码

div class="login-select">
        div v-show="errselectFlag" id="err-select">
    /div>
            p id="tITle-p">
    按住滑块，拖拽验证/p>
            div id="left-select">
    /div>
            div id="right-select">
            i id="icon-dui" class="iconfont icon-right">
    /i>
        /div>
    /div>
    

javascript代码

//   滑块验证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;
 //按下按钮后与窗口的x轴间距      // 鼠标移动事件      oRight.onmouSEMove = function (e) {
        if (e.clientX != 240) {
              oRight.style.left = 0 + "px";
              bg.style.left = 0 + "px";
        }
            var moveX = e.clientX - downX;
     //滑动的时候距离窗口的x轴的间距        //只有在大于0的时候才拖动,否则会出现反向拖动        if (moveX >
 0) {
              oRight.style.left = moveX + "px";
     //滑块与左边的距离          bg.style.width = moveX + "px";
     //背景的宽度就是滑块距离左边的位置          if (moveX >
= 280 - oRight.offsetWidth) {
                i.classname = "iconfont icon-xingzhuang";
                i.style.color = "rgb(86, 192, 15)";
                title.innerText = "验证通过";
                title.style.color = "#fff";
                oRight.onmousemove = null;
                oRight.onmousedown = null;
          }
        }
      }
    ;
    }
    ;
    

style代码

注：样式为sass文件

*{
    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;
      }
    }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS实现拖动滑块验证
• JavaScript实现滑块验证案例
• JavaScript实现滑块验证码
• @L_304_3@
• js canvas实现滑块验证
• js实现滑动滑块验证登录
• 原生JS封装拖动验证滑块的实现代码示例
• JS逆向之爱奇艺滑块加密的实现

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！