原生js实现拖动滑块验证

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>原生js实现拖动滑块验证</title>
    <style>
        #box{
            width:150px;
            height: 20px;
            position: relative;
            background: #ccc;
        }
        #box .btn{
            width:20px;
            height: 20px;
            box-sizing: border-box;
            border:1px solid #eee;
            text-align: center;
            line-height: 20px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            font-size: 8px;
            background: #fff;
            cursor: pointer;
            
        }
        #box .bg{
            width: 0;
            height: 100%;
            background: #f0f;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        #box .text{
            width: 100%;
            height: 100%;
            text-align: center;
            position: absolute;
            line-height: 20px;
            z-index: 2;
            font-size: 8px;
            left: 0;
            top: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="btn">》</div>
        <p class="text">拖动滑块验证</p>
        <div class="bg"></div>
    </div>
</body>
</html>
<script>
    window.onload=function(){
    //事件:滑块1.按下  onmousedown
        //2.拖动 onmousemove
        //3.松开 onmouseup
        var flag=false; //处理验证是否通过  默认是不通过
        var box=document.getElementById('box');//大盒子
        var btn=document.getElementsByClassName('btn')[0];//滑块
        var text=document.getElementsByClassName('text')[0];//文字
        var bg=document.getElementsByClassName('bg')[0];//背景
        //按下
        btn.onmousedown=function(e){
            var downX=e.clientX; //按下按钮后与窗口的x轴间距
            //移动
            btn.onmousemove=function(e){
                var moveX=e.clientX-downX; //滑动的时候距离窗口的x轴的间距  滑动的x-按下的x             
                //只有在大于0的时候才拖动
                if(moveX>0){
                    btn.style.left=moveX+'px';//滑块与左边的距离
                    bg.style.width=moveX+'px'; //背景的宽度就是滑块距离左边的位置
                    //验证成功 条件 不能> 盒子的宽度-滑块的宽度 
                    if(moveX>=(box.offsetWidth-btn.offsetWidth)){
                        text.innerText='验证成功';
                        text.style.color='#fff';
                        btn.onmousemove=null; //清除拖动事件
                        btn.onmousedown=null; //清除按下事件
                        flag=true; //通过的时候设置为true
                    }
                }
                
            }
        }
        
        //松开
        btn.onmouseup=function(){
            //为假的时候
            if(flag==false){
                btn.onmousemove=null;//清除事件
                btn.style.left=0;
                bg.style.width=0;
            }
            
        }
    }
</script>
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享