// 验证码组件逻辑 (function() { // 获取DOM元素 const captchaDisplay = document.getElementById('captchaDisplay'); const refreshCaptcha = document.getElementById('refreshCaptcha'); const captchaInput = document.getElementById('captchaInput'); const verifyButton = document.getElementById('verifyButton'); const captchaError = document.getElementById('captchaError'); const captchaSuccess = document.getElementById('captchaSuccess'); // 生成加法验证码 function generateCaptcha() { const num1 = Math.floor(Math.random() * 10) + 1; const num2 = Math.floor(Math.random() * 10) + 1; const answer = num1 + num2; // 存储正确答案到 sessionStorage sessionStorage.setItem('captchaAnswer', answer); // 显示验证码 captchaDisplay.textContent = `${num1} + ${num2} = ?`; return { num1, num2, answer }; } // 刷新验证码 refreshCaptcha.addEventListener('click', function() { generateCaptcha(); captchaInput.value = ''; hideError(); }); // 显示错误信息 function showError(message) { captchaError.textContent = message || '计算结果不正确,请重新计算'; captchaError.style.display = 'block'; } // 隐藏错误信息 function hideError() { captchaError.style.display = 'none'; } // 显示成功信息 function showSuccess() { captchaSuccess.style.display = 'block'; setTimeout(() => { captchaSuccess.style.display = 'none'; }, 3000); } // 验证验证码 function validateCaptcha() { const userInput = parseInt(captchaInput.value); const correctAnswer = parseInt(sessionStorage.getItem('captchaAnswer')); // 基本验证 if (isNaN(userInput)) { showError('请输入有效的计算结果'); return false; } // 验证码验证 if (userInput !== correctAnswer) { showError('计算结果不正确,请重新计算'); generateCaptcha(); // 重新生成验证码 captchaInput.value = ''; return false; } // 验证成功处理 const verifyTime = new Date(); const nextVerifyTime = new Date(verifyTime.getTime() + 24 * 60 * 60 * 1000); // 24小时后过期 // 存储会话信息到 localStorage const sessionData = { verifyTime: verifyTime.toISOString(), nextVerifyTime: nextVerifyTime.toISOString() }; localStorage.setItem('captchaSession', JSON.stringify(sessionData)); // 显示成功信息 showSuccess(); // 隐藏验证码容器 setTimeout(() => { document.querySelector('.captcha-wrapper').style.display = 'none'; }, 1000); return true; } // 检查会话状态 function checkSession() { const sessionData = localStorage.getItem('captchaSession'); if (sessionData) { const session = JSON.parse(sessionData); const now = new Date(); const nextVerify = new Date(session.nextVerifyTime); // 检查会话是否过期 if (now < nextVerify) { // 会话有效,隐藏验证码容器 document.querySelector('.captcha-wrapper').style.display = 'none'; return true; } else { // 会话过期,清除存储 localStorage.removeItem('captchaSession'); } } // 显示验证码页面 setTimeout(() => { generateCaptcha(); }, 100); return false; } // 退出验证 function logout() { localStorage.removeItem('captchaSession'); sessionStorage.removeItem('captchaAnswer'); document.querySelector('.captcha-wrapper').style.display = 'flex'; captchaInput.value = ''; hideError(); generateCaptcha(); } // 事件监听器 verifyButton.addEventListener('click', validateCaptcha); // 回车键验证支持 captchaInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { validateCaptcha(); } }); // 初始化 document.addEventListener('DOMContentLoaded', function() { checkSession(); }); // 暴露退出函数到全局作用域 window.logoutCaptcha = logout; })();