HTML设计随机验证码验证及点击弹出浮动字方法含美化代码（四川省职高信息技术一类）

于 2025-05-13 08:32:31 发布
阅读量435 收藏
点赞数 13
分类专栏： 四川省职业高中HTML 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_88399315/article/details/147914392
版权

一：HTML代码区域

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>星空验证码验证</title>
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<link href="CSS.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="stars" id="stars"></div>

		<div class="content">
			<h1>欢迎访问星空验证系统</h1>
			<p>这是一个结合星空特效的验证码验证页面。点击下方按钮将弹出验证码验证窗口。</p>
			<p>为了确保您不是机器人，我们需要您完成验证码验证。</p>

			<button id="showCaptchaBtn" class="btn">点击验证</button>
		</div>

		<!-- 验证码弹窗 -->
		<div id="captchaModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<div class="captcha-container">
					<h2>验证码验证</h2>
					<p>请输入下方显示的验证码：</p>

					<div id="captchaText" class="captcha-image">ABCD12</div>
					<button class="refresh-btn" onclick="refreshCaptcha()">刷新验证码</button>

					<input type="text" id="captchaInput" class="captcha-input" placeholder="输入验证码">
					<div id="errorMsg" class="error-message">验证码错误，请重试！</div>

					<button class="btn" onclick="validateCaptcha()">提交验证</button>
				</div>
			</div>
		</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-13 -->
		<script src="JavaScript/JavaScriptdj.js"></script>
	</body>
</html>

二：CSS代码区域

/* 星空背景样式 */
body {
	font-family: 'Arial', sans-serif;
	height: 100vh;
	margin: 0;
	position: relative;
	overflow: auto;
	background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #4e4376);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* 星空效果 */
.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.star {
	position: absolute;
	background-color: #fff;
	border-radius: 50%;
	animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

/* 浮动文字效果 */
.float-text {
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	pointer-events: none;
	animation: floatUp 1.5s forwards;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
	z-index: 100;
}

@keyframes floatUp {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(var(--endX, 0), var(--endY, -80px)) scale(1.5);
	}
}

/* 验证码内容样式 */
.content {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	max-width: 600px;
	width: 90%;
	margin: 30px auto;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

h1 {
	color: #333;
	text-align: center;
	margin-bottom: 20px;
}

p {
	color: #555;
	line-height: 1.6;
}

.btn {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 12px 24px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 20px 0;
	cursor: pointer;
	border-radius: 30px;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
	background-color: #45a049;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* 验证码弹窗样式 */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
}

.modal-content {
	background-color: rgba(255, 255, 255, 0.95);
	margin: 15% auto;
	padding: 25px;
	border-radius: 12px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.2s;
}

.close:hover {
	color: #333;
}

.captcha-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}

.captcha-image {
	background-color: #f0f0f0;
	padding: 15px 25px;
	margin-bottom: 20px;
	font-size: 28px;
	letter-spacing: 8px;
	color: #333;
	text-align: center;
	border-radius: 6px;
	user-select: none;
	font-family: monospace;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.captcha-input {
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	transition: border 0.3s;
}

.captcha-input:focus {
	border-color: #4CAF50;
	outline: none;
	box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.refresh-btn {
	background: none;
	border: none;
	color: #4CAF50;
	cursor: pointer;
	margin-bottom: 15px;
	font-size: 14px;
	transition: color 0.2s;
}

.refresh-btn:hover {
	color: #3d8b40;
}

.error-message {
	color: #f44336;
	font-size: 14px;
	margin-bottom: 10px;
	display: none;
}

三：JavaScript代码区域

// 创建星空背景
			function createStars() {
				const starsContainer = document.getElementById('stars');
				const starCount = 150;

				for (let i = 0; i < starCount; i++) {
					const star = document.createElement('div');
					star.className = 'star';

					// 随机大小 (1-3px)
					const size = Math.random() * 2 + 1;
					star.style.width = `${size}px`;
					star.style.height = `${size}px`;

					// 随机位置
					star.style.left = `${Math.random() * 100}%`;
					star.style.top = `${Math.random() * 100}%`;

					// 随机闪烁时间 (2-5秒)
					star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);

					starsContainer.appendChild(star);
				}
			}

			// 页面加载完成后创建星星
			window.addEventListener('DOMContentLoaded', createStars);

			// 定义要显示的消息数组
			const messages = ["星火", "相传", "时代", "验证", "安全", "保护"];
			let clickCount = 0;

			// 监听整个文档的点击事件
			document.addEventListener('click', function(event) {
				// 如果点击的是验证码相关元素，则不显示星空文字
				if (event.target.closest('.modal-content') || event.target.id === 'showCaptchaBtn') {
					return;
				}

				// 创建浮动文字元素
				const floatText = document.createElement('div');
				floatText.className = 'float-text';

				// 设置文字内容和位置
				floatText.textContent = messages[clickCount % messages.length];
				floatText.style.left = `${event.clientX}px`;
				floatText.style.top = `${event.clientY}px`;

				// 随机文字颜色 (浅色系)
				const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
				floatText.style.color = colors[Math.floor(Math.random() * colors.length)];

				// 添加到body中
				document.body.appendChild(floatText);

				// 1.5秒后移除元素
				setTimeout(() => {
					floatText.remove();
				}, 1500);

				// 增加计数器
				clickCount++;

				// 点击时创建粒子效果
				createParticles(event.clientX, event.clientY);
			});

			// 创建点击粒子效果
			function createParticles(x, y) {
				const particleCount = 8;

				for (let i = 0; i < particleCount; i++) {
					const particle = document.createElement('div');
					particle.className = 'float-text';
					particle.style.fontSize = '10px';
					particle.textContent = '✧';
					particle.style.left = `${x}px`;
					particle.style.top = `${y}px`;
					particle.style.animation = `floatUp 1s forwards`;
					particle.style.animationDelay = `${i * 0.1}s`;

					// 随机方向
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 30 + 20;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(() => {
						particle.remove();
					}, 1000);
				}
			}

			// 验证码功能
			// 获取弹窗元素
			const modal = document.getElementById("captchaModal");
			const btn = document.getElementById("showCaptchaBtn");
			const span = document.getElementsByClassName("close")[0];

			// 点击按钮打开弹窗
			btn.onclick = function() {
				modal.style.display = "block";
				refreshCaptcha(); // 每次打开都刷新验证码
			}

			// 点击关闭按钮关闭弹窗
			span.onclick = function() {
				modal.style.display = "none";
			}

			// 点击弹窗外部关闭弹窗
			window.onclick = function(event) {
				if (event.target == modal) {
					modal.style.display = "none";
				}
			}

			// 刷新验证码
			function refreshCaptcha() {
				const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
				let captcha = "";
				for (let i = 0; i < 6; i++) {
					captcha += chars[Math.floor(Math.random() * chars.length)];
				}
				document.getElementById("captchaText").innerText = captcha;
				document.getElementById("errorMsg").style.display = "none";
				document.getElementById("captchaInput").value = "";
			}

			// 验证验证码
			function validateCaptcha() {
				const userInput = document.getElementById("captchaInput").value.toUpperCase();
				const captcha = document.getElementById("captchaText").innerText;
				const errorMsg = document.getElementById("errorMsg");

				if (userInput === captcha) {
					// 验证成功时创建庆祝粒子效果
					createCelebrationParticles();

					setTimeout(() => {
						alert("验证成功！");
						modal.style.display = "none";
						// 这里可以添加验证成功后的操作，比如提交表单等
					}, 800);
				} else {
					errorMsg.style.display = "block";
					document.getElementById("captchaInput").value = "";
					refreshCaptcha();
				}
			}

			// 验证成功时的庆祝粒子效果
			function createCelebrationParticles() {
				const modalContent = document.querySelector('.modal-content');
				const rect = modalContent.getBoundingClientRect();
				const centerX = rect.left + rect.width / 2;
				const centerY = rect.top + rect.height / 2;

				const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
				const symbols = ['★', '☆', '✧', '✦', '✶'];

				for (let i = 0; i < 30; i++) {
					const particle = document.createElement('div');
					particle.className = 'float-text';
					particle.style.fontSize = `${Math.random() * 10 + 10}px`;
					particle.textContent = symbols[Math.floor(Math.random() * symbols.length)];
					particle.style.left = `${centerX}px`;
					particle.style.top = `${centerY}px`;
					particle.style.color = colors[Math.floor(Math.random() * colors.length)];
					particle.style.animation = `floatUp 1.5s forwards`;
					particle.style.animationDelay = `${i * 0.05}s`;

					// 随机方向
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 100 + 50;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(() => {
						particle.remove();
					}, 1500);
				}
			}

四：代码文件结构[仅限index.html、CSS.css、JavaScript/JavaScriptdj.js三个文件]

五：合并后总文件

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>星空验证码验证</title>
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<style>
			// 创建星空背景
			function createStars() {
				const starsContainer=document.getElementById('stars');
				const starCount=150;

				for (let i=0; i < starCount; i++) {
					const star=document.createElement('div');
					star.className='star';

					// 随机大小 (1-3px)
					const size=Math.random() * 2+1;
					star.style.width=`${size}px`;
					star.style.height=`${size}px`;

					// 随机位置
					star.style.left=`${Math.random() * 100}%`;
					star.style.top=`${Math.random() * 100}%`;

					// 随机闪烁时间 (2-5秒)
					star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);

					starsContainer.appendChild(star);
				}
			}

			// 页面加载完成后创建星星
			window.addEventListener('DOMContentLoaded', createStars);

			// 定义要显示的消息数组
			const messages=["星火",
			"相传",
			"时代",
			"验证",
			"安全",
			"保护"];
			let clickCount=0;

			// 监听整个文档的点击事件
			document.addEventListener('click', function(event) {

					// 如果点击的是验证码相关元素，则不显示星空文字
					if (event.target.closest('.modal-content') || event.target.id==='showCaptchaBtn') {
						return;
					}

					// 创建浮动文字元素
					const floatText=document.createElement('div');
					floatText.className='float-text';

					// 设置文字内容和位置
					floatText.textContent=messages[clickCount % messages.length];
					floatText.style.left=`${event.clientX}px`;
					floatText.style.top=`${event.clientY}px`;

					// 随机文字颜色 (浅色系)
					const colors=['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
					floatText.style.color=colors[Math.floor(Math.random() * colors.length)];

					// 添加到body中
					document.body.appendChild(floatText);

					// 1.5秒后移除元素
					setTimeout(()=> {
							floatText.remove();
						}

						, 1500);

					// 增加计数器
					clickCount++;

					// 点击时创建粒子效果
					createParticles(event.clientX, event.clientY);
				});

			// 创建点击粒子效果
			function createParticles(x, y) {
				const particleCount=8;

				for (let i=0; i < particleCount; i++) {
					const particle=document.createElement('div');
					particle.className='float-text';
					particle.style.fontSize='10px';
					particle.textContent='✧';
					particle.style.left=`${x}px`;
					particle.style.top=`${y}px`;
					particle.style.animation=`floatUp 1s forwards`;
					particle.style.animationDelay=`${i * 0.1}s`;

					// 随机方向
					const angle=Math.random() * Math.PI * 2;
					const distance=Math.random() * 30+20;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(()=> {
							particle.remove();
						}

						, 1000);
				}
			}

			// 验证码功能
			// 获取弹窗元素
			const modal=document.getElementById("captchaModal");
			const btn=document.getElementById("showCaptchaBtn");
			const span=document.getElementsByClassName("close")[0];

			// 点击按钮打开弹窗
			btn.onclick=function() {
				modal.style.display="block";
				refreshCaptcha(); // 每次打开都刷新验证码
			}

			// 点击关闭按钮关闭弹窗
			span.onclick=function() {
				modal.style.display="none";
			}

			// 点击弹窗外部关闭弹窗
			window.onclick=function(event) {
				if (event.target==modal) {
					modal.style.display="none";
				}
			}

			// 刷新验证码
			function refreshCaptcha() {
				const chars="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
				let captcha="";

				for (let i=0; i < 6; i++) {
					captcha+=chars[Math.floor(Math.random() * chars.length)];
				}

				document.getElementById("captchaText").innerText=captcha;
				document.getElementById("errorMsg").style.display="none";
				document.getElementById("captchaInput").value="";
			}

			// 验证验证码
			function validateCaptcha() {
				const userInput=document.getElementById("captchaInput").value.toUpperCase();
				const captcha=document.getElementById("captchaText").innerText;
				const errorMsg=document.getElementById("errorMsg");

				if (userInput===captcha) {
					// 验证成功时创建庆祝粒子效果
					createCelebrationParticles();

					setTimeout(()=> {
							alert("验证成功！");
							modal.style.display="none";
							// 这里可以添加验证成功后的操作，比如提交表单等
						}

						, 800);
				}

				else {
					errorMsg.style.display="block";
					document.getElementById("captchaInput").value="";
					refreshCaptcha();
				}
			}

			// 验证成功时的庆祝粒子效果
			function createCelebrationParticles() {
				const modalContent=document.querySelector('.modal-content');
				const rect=modalContent.getBoundingClientRect();
				const centerX=rect.left+rect.width / 2;
				const centerY=rect.top+rect.height / 2;

				const colors=['#ff9ff3',
				'#feca57',
				'#ff6b6b',
				'#48dbfb',
				'#1dd1a1'];
				const symbols=['★',
				'☆',
				'✧',
				'✦',
				'✶'];

				for (let i=0; i < 30; i++) {
					const particle=document.createElement('div');
					particle.className='float-text';
					particle.style.fontSize=`${Math.random() * 10 + 10}px`;
					particle.textContent=symbols[Math.floor(Math.random() * symbols.length)];
					particle.style.left=`${centerX}px`;
					particle.style.top=`${centerY}px`;
					particle.style.color=colors[Math.floor(Math.random() * colors.length)];
					particle.style.animation=`floatUp 1.5s forwards`;
					particle.style.animationDelay=`${i * 0.05}s`;

					// 随机方向
					const angle=Math.random() * Math.PI * 2;
					const distance=Math.random() * 100+50;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(()=> {
							particle.remove();
						}

						, 1500);
				}
			}
		</style>
	</head>
	<body>
		<div class="stars" id="stars"></div>

		<div class="content">
			<h1>欢迎访问星空验证系统</h1>
			<p>这是一个结合星空特效的验证码验证页面。点击下方按钮将弹出验证码验证窗口。</p>
			<p>为了确保您不是机器人，我们需要您完成验证码验证。</p>

			<button id="showCaptchaBtn" class="btn">点击验证</button>
		</div>

		<!-- 验证码弹窗 -->
		<div id="captchaModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<div class="captcha-container">
					<h2>验证码验证</h2>
					<p>请输入下方显示的验证码：</p>

					<div id="captchaText" class="captcha-image">ABCD12</div>
					<button class="refresh-btn" onclick="refreshCaptcha()">刷新验证码</button>

					<input type="text" id="captchaInput" class="captcha-input" placeholder="输入验证码">
					<div id="errorMsg" class="error-message">验证码错误，请重试！</div>

					<button class="btn" onclick="validateCaptcha()">提交验证</button>
				</div>
			</div>
		</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-13 -->
		<script>
			// 创建星空背景
			function createStars() {
				const starsContainer = document.getElementById('stars');
				const starCount = 150;

				for (let i = 0; i < starCount; i++) {
					const star = document.createElement('div');
					star.className = 'star';

					// 随机大小 (1-3px)
					const size = Math.random() * 2 + 1;
					star.style.width = `${size}px`;
					star.style.height = `${size}px`;

					// 随机位置
					star.style.left = `${Math.random() * 100}%`;
					star.style.top = `${Math.random() * 100}%`;

					// 随机闪烁时间 (2-5秒)
					star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);

					starsContainer.appendChild(star);
				}
			}

			// 页面加载完成后创建星星
			window.addEventListener('DOMContentLoaded', createStars);

			// 定义要显示的消息数组
			const messages = ["星火", "相传", "时代", "验证", "安全", "保护"];
			let clickCount = 0;

			// 监听整个文档的点击事件
			document.addEventListener('click', function(event) {
				// 如果点击的是验证码相关元素，则不显示星空文字
				if (event.target.closest('.modal-content') || event.target.id === 'showCaptchaBtn') {
					return;
				}

				// 创建浮动文字元素
				const floatText = document.createElement('div');
				floatText.className = 'float-text';

				// 设置文字内容和位置
				floatText.textContent = messages[clickCount % messages.length];
				floatText.style.left = `${event.clientX}px`;
				floatText.style.top = `${event.clientY}px`;

				// 随机文字颜色 (浅色系)
				const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
				floatText.style.color = colors[Math.floor(Math.random() * colors.length)];

				// 添加到body中
				document.body.appendChild(floatText);

				// 1.5秒后移除元素
				setTimeout(() => {
					floatText.remove();
				}, 1500);

				// 增加计数器
				clickCount++;

				// 点击时创建粒子效果
				createParticles(event.clientX, event.clientY);
			});

			// 创建点击粒子效果
			function createParticles(x, y) {
				const particleCount = 8;

				for (let i = 0; i < particleCount; i++) {
					const particle = document.createElement('div');
					particle.className = 'float-text';
					particle.style.fontSize = '10px';
					particle.textContent = '✧';
					particle.style.left = `${x}px`;
					particle.style.top = `${y}px`;
					particle.style.animation = `floatUp 1s forwards`;
					particle.style.animationDelay = `${i * 0.1}s`;

					// 随机方向
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 30 + 20;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(() => {
						particle.remove();
					}, 1000);
				}
			}

			// 验证码功能
			// 获取弹窗元素
			const modal = document.getElementById("captchaModal");
			const btn = document.getElementById("showCaptchaBtn");
			const span = document.getElementsByClassName("close")[0];

			// 点击按钮打开弹窗
			btn.onclick = function() {
				modal.style.display = "block";
				refreshCaptcha(); // 每次打开都刷新验证码
			}

			// 点击关闭按钮关闭弹窗
			span.onclick = function() {
				modal.style.display = "none";
			}

			// 点击弹窗外部关闭弹窗
			window.onclick = function(event) {
				if (event.target == modal) {
					modal.style.display = "none";
				}
			}

			// 刷新验证码
			function refreshCaptcha() {
				const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
				let captcha = "";
				for (let i = 0; i < 6; i++) {
					captcha += chars[Math.floor(Math.random() * chars.length)];
				}
				document.getElementById("captchaText").innerText = captcha;
				document.getElementById("errorMsg").style.display = "none";
				document.getElementById("captchaInput").value = "";
			}

			// 验证验证码
			function validateCaptcha() {
				const userInput = document.getElementById("captchaInput").value.toUpperCase();
				const captcha = document.getElementById("captchaText").innerText;
				const errorMsg = document.getElementById("errorMsg");

				if (userInput === captcha) {
					// 验证成功时创建庆祝粒子效果
					createCelebrationParticles();

					setTimeout(() => {
						alert("验证成功！");
						modal.style.display = "none";
						// 这里可以添加验证成功后的操作，比如提交表单等
					}, 800);
				} else {
					errorMsg.style.display = "block";
					document.getElementById("captchaInput").value = "";
					refreshCaptcha();
				}
			}

			// 验证成功时的庆祝粒子效果
			function createCelebrationParticles() {
				const modalContent = document.querySelector('.modal-content');
				const rect = modalContent.getBoundingClientRect();
				const centerX = rect.left + rect.width / 2;
				const centerY = rect.top + rect.height / 2;

				const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
				const symbols = ['★', '☆', '✧', '✦', '✶'];

				for (let i = 0; i < 30; i++) {
					const particle = document.createElement('div');
					particle.className = 'float-text';
					particle.style.fontSize = `${Math.random() * 10 + 10}px`;
					particle.textContent = symbols[Math.floor(Math.random() * symbols.length)];
					particle.style.left = `${centerX}px`;
					particle.style.top = `${centerY}px`;
					particle.style.color = colors[Math.floor(Math.random() * colors.length)];
					particle.style.animation = `floatUp 1.5s forwards`;
					particle.style.animationDelay = `${i * 0.05}s`;

					// 随机方向
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 100 + 50;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(() => {
						particle.remove();
					}, 1500);
				}
			}
		</script>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值