原生js实现向右滑动验证

最新推荐文章于 2024-03-21 22:40:56 发布

QSZHT

最新推荐文章于 2024-03-21 22:40:56 发布

阅读量5.8k

点赞数

分类专栏： javascript 文章标签： javascript js html css

本文链接：https://blog.csdn.net/weixin_42380671/article/details/104839026

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码：
html

 <body onload="yzm()">
    <div class="box">
        <!--按钮-->
        <div class="btn">></div>
        <!--文字-->
        <p class="text">请向右滑动滑块</p>
        <!--背景-->
        <div class="bg"></div>
    </div>
</body>

function yzm() {
        var box=document.querySelector('.box');//盒子
        var text=document.querySelector('.text');//文字
        var btn=document.querySelector('.btn');//按钮
        var bg=document.querySelector('.bg');//背景层
        var flag=false;//验证标识
        //鼠标按下
        btn.onmousedown=function (e) {
            var downX=e.clientX;//鼠标按下时与x轴的的距离
            //鼠标移动
            btn.onmousemove=function (e) {
                var moveX=e.clientX-downX;//鼠标移动的距离
                if(moveX>0){
                    btn.style.left=moveX+'px';
                    bg.style.width=moveX+'px';
                    if(moveX>=box.offsetWidth-btn.offsetWidth){
                        flag=true;//验证成功
                        text.innerHTML='验证通过';
                        text.style.color='#ffffff';
                        //清除事件
                        btn.onmousemove=null;
                        btn.onmousedown=null;
                    }
                }
            }
        };
        //鼠标松开
        btn.onmouseup=function () {
            //清除事件
            btn.onmousemove=null;
            if(flag) return;
            btn.style.left=0;
            bg.style.width=0;
        }
    }