JavaScript实现滑动验证码

2025-05-26 16:09:24 584
滑动验证码（也叫做滑动拼图验证码）是一种用户交互形式的验证码，通常用于网页或移动应用的登录、注册或敏感操作。其基本原理是用户需要将一个滑块拖动到正确的位置以完成验证。
下面是一个使用原生JavaScript和HTML实现的简单滑动验证码的示例。
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>滑动验证码示例</title>  
    <style>  
        #captcha {  
            position: relative;  
            width: 300px;  
            height: 40px;  
            border: 1px solid #13cbb9;
            margin: 50px;  
            border-radius: 6px;
            
        }  
        #captchaImg{
            position: absolute;
            width: 100%;  
            height: 100%;  
            background-color: #f5f5f5; /* 初始背景色 */  
            transition: background-color 0.3s ease; /* 平滑过渡效果 */  
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #captcha img {  
            width: 100%;  
            height: 100%;  
        }  
  
        #slider {  
            border-radius: 4px;
            position: absolute;  
            width: 50px;  
            height: 40px;  
            background-color: #13cbb9;   
            cursor: pointer;  
            user-select: none;  
            display: flex;
            justify-content: center;
            align-items: center;
        }  
        #slider .ico{
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 22px;
        }
        #sucessTxt{
            color: #13cbb9;
            display: none;
        }
    </style>  
</head>  
<body>  
    <div id="captcha">  
        <div id="captchaImg">
            <span id="sucessTxt">✓ 验证成功</span>
        </div>
        
        <!-- <img id="captchaImg" src="captcha-image.jpg" alt="Captcha Image">  -->
        <div id="slider">
            <span class="ico">»</span>
        </div>  
    </div>  
  
    <script>
        const captchaImg = document.getElementById('captchaImg');  
        const slider = document.getElementById('slider');  
        const captchaContainer = document.getElementById('captcha');
        const sucessTxt = document.getElementById('sucessTxt');
          
        let sliderStartPosition = 0;  
        let sliderEndPosition = 250; // 假设滑块需要滑动的距离是250px  
        let isDragging = false;  
          
        slider.addEventListener('mousedown', (e) => {  
            isDragging = true;  
            sliderStartPosition = e.clientX - slider.offsetLeft;  
        });  
          
        window.addEventListener('mouseup', () => {  
            isDragging = false;  
            checkSliderPosition();  
        });  
          
        window.addEventListener('mousemove', (e) => {  
            if (!isDragging) return;  
            const newSliderPosition = e.clientX - sliderStartPosition;  
            
            const sliderPercentage = newSliderPosition / sliderEndPosition; // 计算滑块移动的百分比  
            const bgColor = `rgba(19,203,185, ${1-sliderPercentage})`; // 根据百分比计算背景色，这里使用白色透明度变化  
            //captchaImg.style.backgroundColor = bgColor; // 
                
            if (newSliderPosition < 0) {  
                slider.style.left = '0px';  
                captchaImg.style.backgroundColor = '#f5f5f5'; 
                sucessTxt.style.display = `none`
            } else if (newSliderPosition > sliderEndPosition) {  
                slider.style.left = `${sliderEndPosition}px`;  
                captchaImg.style.backgroundColor = 'rgba(19,203,185, 0)'; 
            } else {  
                slider.style.left = `${newSliderPosition}px`;  
                sucessTxt.style.display = `none`
            }  
        });  
          
        function checkSliderPosition() {  
            const sliderCurrentPosition = parseInt(window.getComputedStyle(slider).left, 10);  
            if (sliderCurrentPosition >= sliderEndPosition) {  
                //alert('验证成功！');  
                // TODO: 发送请求到后端验证滑块位置，并处理后续逻辑  
                captchaImg.style.backgroundColor = 'rgba(19,203,185,.1)'; 
                sucessTxt.style.display = `block`
               // resetCaptcha();  
            } else {  
                slider.style.left = '0px'; // 重置滑块位置  
            }  
        }  
          
        function resetCaptcha() {  
            // TODO: 加载新的验证码图片，并重置滑块位置等  
            captchaImg.src = 'new-captcha-image.jpg'; // 假设这是新的验证码图片URL  
            slider.style.left = '0px';  
        }
    </script>  
</body>  
</html>
OBJUI

JavaScript实现滑动验证码

热门文章:

更多精彩，请关注公众号

热门文章:
