JavaScript实现滑动验证码

219 2024年04月19日前端

滑动验证码（也叫做滑动拼图验证码）是一种用户交互形式的验证码，通常用于网页或移动应用的登录、注册或敏感操作。其基本原理是用户需要将一个滑块拖动到正确的位置以完成验证。

下面是一个使用原生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>

共0 条评论

JavaScript实现滑动验证码

go语言怎么连接mysql,并实现增删改查

使用Echarts画甘特图

beego实现模块化开发

Beego实现JWT

PHP解决雪花算法ID在前端精度丢失的问题

go实现MD5

使用Axios+PHP+JWT实现登录认证

虚拟滚动实现页面百万数据滚动

Linux服务器Rsync结合inotify同步文件

wordpress自定义配置