原生JS实现拖动滑块验证

最新推荐文章于 2024-05-22 06:34:04 发布

sinat_16664531

最新推荐文章于 2024-05-22 06:34:04 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/sinat_16664531/article/details/104942802

版权

原生JS实现拖动滑块验证

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
   <title>js slide</title>
   <style>
.box{
position:relative;
width:300px;
height:34px;
background-color:#e8e8e8;
line-height:34px;
magin:20px auto;
}
.bg{
position:absolute;
height:100%;
background-color:#7ac23c;
z-index:1;
}
.text{
position:absolute;
width:100%;
margin:0;
z-index:2;
text-align:center}

.btn{
position:absolute;
top:0;
width:40px;
height:32px;
z-index:3;
background:#fff;
border:1px solid #ccc;
cursor:pointer;text-align:center}
</style>
<script>
window.οnlοad=function(){
function $(name){
return document.querySelector(name)
};

var box = $(".box"),
btn = $(".btn"),
bg = $(".bg"),
text = $(".text"),
flag = false;

btn.onmousedown = function(event){
var downX = event.clientX;
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-btn.offsetWidth)){
flag= true;
text.innerText='success';
text.style.color='#fff';

btn.onmousemove = null;
btn.onmousedown = null;
}}}
};

btn.onmouseup = function(){
btn.onmousemove = null;
if(flag) return;
this.style.left= 0;
bg.style.width =0;
}
}

</script>

</head>
<body>
<div class="box">
<div class="btn">>></div>
<div class="text">slide to the right</div>
<div class="bg"></div>
</div>
</body>

sinat_16664531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现拖动滑块验证

原生JS实现拖动滑块验证<!DOCTYPE html><html lang="en"><head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>js slide</title> <s...
复制链接

扫一扫