JavaScript实现滑动验证码

1410 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 条评论
相关文章
OBJUI公众号
热门文章
  • 使用Echarts画甘特图

    Echarts是一个非常强大的图表库， 下面我们来使用它来画甘特图，

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

    要使用Go语言连接MySQL，需要使用第三方库。常用的库包括： 这里以go-sql-driver/mysql为 […]

  • beego实现模块化开发

    Beego 框架可以通过模块化开发来提高项目的可维护性和可扩展性，可以将一个大型的应用划分为多个模块，每个模块独立维护，有自己的控制器、视图和模型等。

  • Beego实现JWT

    Beego是一个基于Go语言的Web框架，实现JWT认证可以通过beego的中间件机制来实现，下面是一个简单的 […]

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

    JWT(JSON Web Token),顾名思义就是可以在Web上传输的token，这种token是用JSON格式进行format的。它是一个开源标准(RFC7519)，定义了一个紧凑的自包含的方式在不同实体之间安全的用JSON格式传输信息。

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

    雪花算法（Snowflake）是一种用于生成全局唯一ID的算法，其基本思路是结合时间戳、机器ID、租约ID和序列号生成一个64位的数据，从而保证ID的唯一性。 雪花算法的生成过程如下：

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

    1.概念 虚拟滚动是一种优化长列表性能的技术，它通过按需渲染的方式，只渲染可见部分的列表项，而不是渲染整个列表 […]

  • go实现MD5

    在这个示例中，我们使用了Go标准库中的crypto/md5包来计算一个字符串的MD5值。首先，我们将字符串转换 […]

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

    一、实现效果 服务器A：192.168.161.150 （分布服务器）（rsync客户端+inotify） 服务器B：192.168.161.151 （WEB服务器1）（rsync服务端） 服务器C：192.168.161.152 （WEB服务器2）（rsync服务端） 说明：服务器A有文件更新，自动同步到服务器B和C

  • JavaScript实现滑动验证码

    滑动验证码（也叫做滑动拼图验证码）是一种用户交互形式的验证码，通常用于网页或移动应用的登录、注册或敏感操作。其 […]