JavaScript实现登录滑块验证

我会带着你远行 2022-10-15 00:43 332阅读 0赞

本文实例为大家分享了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;  
\}  
\}