本文实例为大家分享了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.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
dy("nrwz");
查看更多关于JavaScript实现登录滑块验证的详细内容...