正文

JavaScript实现登录滑块验证

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0711

这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

html代码

?
1
2
3
4
5
6
7
8
<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代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//   滑块验证
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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*{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;
      }
    }

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

原文链接：https://blog.csdn.net/weixin_49684597/article/details/115613523