JavaScript经典案例之滑块验证解锁_滑块解密例子-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53278262/article/details/112172233

本文将介绍如何使用JavaScript实现一种常见的滑块验证功能，用于提高网站安全性。通过创建和操作DOM元素，结合事件监听与动画效果，详细解析滑块验证的实现过程。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    // 引入矢量图标库
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2248239_eso2z5bskxk.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            margin-top: 100px;
            margin-left: 200px;
        }
        
        .box .bgColor {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
        }
        
        .box .tips {
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
            user-select: none;
        }
        
        .ball {
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="bgColor"></div>
        <div class="tips">滑动验证</div>
        <div class="ball"><i class="iconfont icon-double-arro-right"></i></div>
    </div>
</body>
<script>
    var box = document.getElementsByClassName("box")[0];
    var ball = document.getElementsByClassName("ball")[0];
    var bgColor = document.getElementsByClassName("bgColor")[0];
    var tips = document.getElementsByClassName("tips")[0];
    // 设置成功状态
    var isSuccess = false; //默认为false  不成功
    ball.onmousedown = function(e) {
        var e = e || window.event;

        // 获取鼠标相对于事件源左上角的位置
        var posx = e.offsetX;

        // 每次鼠标按下时 清除动画样式
        ball.style.transition = "";
        bgColor.style.transition = "";
        document.onmousemove = function(e) {
            var e = e || window.event;
            var x = e.pageX - box.offsetLeft - posx;
            var max = box.clientWidth - ball.clientWidth;
            if (x <= 0) {
                x = 0;
            }
            if (x >= max) {
                x = max;
            }
            bgColor.style.width = x + "px";
            ball.style.left = x + "px";
            bgColor.style.backgroundColor = "#6ff";
            if (x == max) {
                success();
            }
        }
        document.onmouseup = function() {
            // 如果没有解锁成功则返回原点
            if (!isSuccess) {
                bgColor.style.width = 0 + "px";
                ball.style.left = 0 + "px";
                ball.style.transition = "left 0.6s linear";
                bgColor.style.transition = "width 0.6s linear";
            }
            // 鼠标抬起时,移除鼠标移动事件和鼠标抬起事件
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
    // 定义一个滑块解锁成功的方法
    function success() {
        isSuccess = true;
        // 获取图标
        var icon = ball.firstElementChild;
        tips.textContent = "解锁成功";
        bgColor.style.backgroundColor = "lightgreen";
        icon.className = "iconfont icon-gou";
        icon.style.color = "lightgreen";
        //滑动成功时，移除鼠标按下事件
        ball.onmousedown = null;
    }
</script>

</html>

效果图如下: