今天给大家分享的是用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;
      }
    }

    以上就是关于JavaScript实现登录滑块验证的方法，需要的朋友可以参考上述代码，希望本文对大家学习JavaScript有帮助，想要了解更多JavaScript实现滑块验证的内容，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用原生JS怎么写新闻轮播的效果，代码是什么

  这篇文章主要为大家详细介绍了js实现新闻轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 详解TypeScript类型操作的相关基础知识有哪些

  TypeScript语法详解之类型操作的补充 目录 类型操作的补充 类型断言的使用 非空类型的断言 可选链使用介绍 两个特殊操作符 字面量类型介绍 字面量推理介绍 总结 类型操作的补充 类型断言的使用 有时候TypeScript无法获取具体的类型信息,这个我们需要使用类型断言( Type Assertions). 比如我们在操作DOM的时候, 通过 document.getElementById 获取元素, TypeScript只知道该函数会返回HTMLElement ,但并不知道它具体的类型, 是无法得知具体是img还是div等等: 当我

• JS中实现鼠标拖拽效果用到哪些函数，代码是什么

  这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用原生JS如何检查对象是否为空，方法是什么

  这篇文章主要为大家介绍了原生javascript中检查对象是否为空示例实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vue项目中封装axios方法是什么？

  本文给大家分享的是关于vue项目中封装axios的内容，对于实现封装axios下面有详细的介绍及示例代码，需要的朋友可以参考，接下来就跟随小编来学习一下吧。