Happy_language/app/static/js/main.js

// 全局JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 自动隐藏提示消息
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(function(alert) {
        setTimeout(function() {
            alert.style.opacity = '0';
            setTimeout(function() {
                alert.style.display = 'none';
            }, 300);
        }, 5000); // 5秒后自动隐藏
    });
    // 平滑滚动
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    // 表单验证增强
    const forms = document.querySelectorAll('form');
    forms.forEach(function(form) {
        form.addEventListener('submit', function(e) {
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn && !submitBtn.disabled) {
                // 防止重复提交
                setTimeout(function() {
                    submitBtn.disabled = true;
                }, 100);
            }
        });
    });
    // 输入框焦点效果
    const inputs = document.querySelectorAll('.form-control');
    inputs.forEach(function(input) {
        input.addEventListener('focus', function() {
            this.parentNode.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentNode.classList.remove('focused');
        });
    });
    // 工具提示初始化
    if (typeof bootstrap !== 'undefined') {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        // 弹出框初始化
        const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        popoverTriggerList.map(function(popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });
    }
    // 邮箱验证码倒计时功能
    window.startVerificationCountdown = function(buttonId, duration = 60) {
        const button = document.getElementById(buttonId);
        if (!button) return;
        
        let count = duration;
        const originalText = button.textContent;
        
        button.disabled = true;
        
        const timer = setInterval(function() {
            button.textContent = `${count}秒后重试`;
            count--;
            
            if (count < 0) {
                clearInterval(timer);
                button.disabled = false;
                button.textContent = originalText === '发送验证码' ? '重新发送' : originalText;
            }
        }, 1000);
        
        return timer;
    };
    // AJAX请求封装
    window.sendAjaxRequest = function(url, data, successCallback, errorCallback) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (successCallback) successCallback(data);
            } else {
                if (errorCallback) errorCallback(data.message || '请求失败');
            }
        })
        .catch(error => {
            console.error('请求错误:', error);
            if (errorCallback) errorCallback('网络错误，请检查连接');
        });
    };
    // 显示加载状态
    window.showLoading = function(button, loadingText = '处理中...') {
        if (!button) return;
        
        button.disabled = true;
        const originalHTML = button.innerHTML;
        button.innerHTML = `<i class="fas fa-spinner fa-spin me-2"></i>${loadingText}`;
        
        return function() {
            button.disabled = false;
            button.innerHTML = originalHTML;
        };
    };
    // 显示消息提示
    window.showMessage = function(message, type = 'info') {
        const alertContainer = document.querySelector('.container');
        if (!alertContainer) return;
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas fa-${type === 'error' ? 'exclamation-triangle' : type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        alertContainer.insertBefore(alertDiv, alertContainer.firstChild);
        
        // 自动隐藏
        setTimeout(function() {
            alertDiv.style.opacity = '0';
            setTimeout(function() {
                if (alertDiv.parentNode) {
                    alertDiv.parentNode.removeChild(alertDiv);
                }
            }, 300);
        }, 5000);
    };
    // 验证邮箱格式
    window.validateEmail = function(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    };
    // 验证密码强度
    window.validatePassword = function(password) {
        if (password.length < 6) {
            return { valid: false, message: '密码长度至少6位' };
        }
        return { valid: true, message: '密码强度可以' };
    };
    // 数字输入限制
    window.restrictToNumbers = function(inputElement) {
        inputElement.addEventListener('input', function(e) {
            e.target.value = e.target.value.replace(/[^0-9]/g, '');
        });
    };
    // 初始化数字验证码输入框
    const codeInputs = document.querySelectorAll('input[name="verification_code"]');
    codeInputs.forEach(function(input) {
        window.restrictToNumbers(input);
    });
});
// 全局错误处理
window.addEventListener('error', function(e) {
    console.error('全局错误:', e.error);
});
// 全局未处理的Promise拒绝
window.addEventListener('unhandledrejection', function(e) {
    console.error('未处理的Promise拒绝:', e.reason);
});