YoTzh/codesprout-academy-tech-tree-programming

1document.addEventListener('DOMContentLoaded', function() {2    // 初始化动画3    const animateOnScroll = () => {4        const elements = document.querySelectorAll('.fade-in');5        elements.forEach(element => {6            const elementPosition = element.getBoundingClientRect().top;7            const screenPosition = window.innerHeight / 1.3;8            9            if(elementPosition < screenPosition) {10                element.style.opacity = '1';11            }12        });13    };14 15    window.addEventListener('scroll', animateOnScroll);16    animateOnScroll(); // 初始加载时执行一次17 18    // 移动端菜单切换19    const mobileMenuButton = document.querySelector('[data-menu-toggle]');20    if(mobileMenuButton) {21        mobileMenuButton.addEventListener('click', function() {22            const menu = document.querySelector('[data-menu]');23            menu.classList.toggle('hidden');24        });25    }26 27    // 平滑滚动28    document.querySelectorAll('a[href^="#"]').forEach(anchor => {29        anchor.addEventListener('click', function (e) {30            e.preventDefault();31            document.querySelector(this.getAttribute('href')).scrollIntoView({32                behavior: 'smooth'33            });34        });35    });36 37    // 表单验证示例38    const forms = document.querySelectorAll('form');39    forms.forEach(form => {40        form.addEventListener('submit', function(e) {41            const requiredFields = form.querySelectorAll('[required]');42            let isValid = true;43            44            requiredFields.forEach(field => {45                if(!field.value.trim()) {46                    field.classList.add('border-red-500');47                    isValid = false;48                } else {49                    field.classList.remove('border-red-500');50                }51            });52            53            if(!isValid) {54                e.preventDefault();55                alert('请填写所有必填字段');56            }57        });58    });59});