原生js滑块验证

Html

Css


    
    
    
    请向右滑动滑块

.box {
	width:250px;
	height:40px;
	position:relative;
	background-color:#ccc;
	line-height:40px;
	margin:20px auto;
}
.bg {
	position:absolute;
	height:100%;
	background-color:#09BB07;
	z-index:1;
}
.text {
	font-size:12px;
	width:100%;
	position:absolute;
	margin:0;
	text-align:center;
	z-index:2;
}
.btn {
	width:40px;
	height:38px;
	background:#0000FF;
	position:absolute;
	top:0;
	z-index:3;
	border:1px solid #ccc;
	cursor:pointer;
}

//event.clientX:鼠标点下的点到左侧x轴的距离
window.onload = function() {
    //事件处理  onmousedown  onmousemove  onmouseup
    var box = document.querySelector(".box")
    var btn = document.querySelector(".btn")
    var bg = document.querySelector(".bg")
    var text1 = document.querySelector(".text")
    //封装的选择器 声明式函数可以提升
    //			function fun(){
    //				
    //			}
    var flag = false; //标记
    btn.onmousedown = function(event) {
        var downx = event.clientX; //按下后获取的与x轴的距离
        btn.onmousemove = function(e) {
            var movex = e.clientX - downx; //滑块滑动的距离
            //移动的范围
            if (movex > 0) {
                this.style.left = movex + "px";
                bg.style.width = movex + "px";
                if (movex >= box.offsetWidth - 40) {
                    //验证成功
                    flag = true
                    text1.innerHTML = "验证成功"
                    text1.style.color = "#fff"
                    //清除事件
                    btn.onmousedown = null;
                    btn.onmousemove = null;
                }
            }
        }
    }
    //松开事件
    btn.onmouseup = function() {
        //清除事件
        btn.onmousemove = null;
        if (flag) return;
        this.style.left = 0;
        bg.style.width = 0 + "px";
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js滑块验证



代码描述：js滑块验证

更新时间：2019-10-17 01:07:11

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

jiyahua

相关代码

原生js滑块验证

最新