本文实例为大家分享了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.3 s);
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