JavaScript滑块验证

最新推荐文章于 2025-06-09 11:05:21 发布

秋刀鱼丢了水蜜桃

最新推荐文章于 2025-06-09 11:05:21 发布

阅读量408

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37354459/article/details/90378995

本文介绍了一种JavaScript实现的滑块验证功能，当鼠标点击并拖动滑块到末端时，验证成功。然而，存在一个问题：鼠标移出滑块范围时，即使未按下鼠标，再次进入范围仍能拖动滑块，且松开鼠标滑块不会自动复位。针对此现象，文章提出了待改进的点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript滑块验证

效果

鼠标点击后拖动滑块移动，移动至滑动条末端，通过验证，中途松开鼠标，滑块回到默认位置。

待改善

鼠标移出滑块范围则滑块会停止移动，即使此时鼠标松开，滑块也不会回到默认位置，再将鼠标放回滑块，即使鼠标没有摁下，也可以拖动滑块。

代码

<!DOCTYPE html>
<html lang="en">
<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>滑块验证</title>
</head>
<style>
    .box{
        width: 300px;
        height: 35px;
        background: #c5c5c5;
        position: relative;
        
    }

    .btn{
        position: absolute;
        width: 40px;
        height: inherit;
        background-color: black;
        z-index: 2;
    }

    .text{
        position: relative;
        text-align: center;
        padding: 0;
        margin: 0;
        line-height: 35px;
        z-index: 1;
    }

    .bg{
        position: absolute;
        width: 0px;
        height: inherit;
        background: #56f863;
        z-index: 0;
    }
</style>
<body onselectstart="return false;">
    

    <div class="box" id="box">
        <div class="btn" id="btn">

        </div>
        <div class="bg" id="bg">

        </div>
        <p class="text" id="text" >
            拖动滑块完成验证
        </p>
        
    </div>
    <script>
        var boxWidth = document.getElementById("box").offsetWidth;
        var btn = document.getElementById("btn");
        var btnWidth = btn.offsetWidth;
        var bg = document.getElementById("bg");
        var text = document.getElementById("text");
        var flag = false;

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

        }
        
        btn.onmousedown=function(event){
            var start = event.clientX;
            console.log(start);
            btn.onmousemove=function(event){
                var move = event.clientX - start;
                if(move>0){
                    btn.style.left = move + 'px';
                    bg.style.width = move + 'px';
                }
                if(move>= boxWidth - btnWidth)
                {
                    text.style.color = "#fff";
                    text.innerHTML = "验证通过"
                    this.onmousemove = null;
                    this.onmousedown = null;
                    flag = true;
                }
            }
        }

        
    </script>
</body>
</html>