first commit
This commit is contained in:
祀梦
222
frontend/js/main.js
Normal file
222
frontend/js/main.js
Normal file
@@ -0,0 +1,222 @@
|
||||
// 首页通用JavaScript功能
|
||||
// 主要处理导航栏交互、页面滚动效果等通用功能
|
||||
|
||||
class MainPage {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// 初始化所有功能
|
||||
this.initNavbar();
|
||||
this.initScrollEffects();
|
||||
this.initSmoothScroll();
|
||||
this.initBackToTop();
|
||||
this.initMobileMenu();
|
||||
this.initAuthButtons();
|
||||
}
|
||||
|
||||
// 初始化导航栏交互
|
||||
initNavbar() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (!navbar) return;
|
||||
|
||||
// 滚动时改变导航栏样式
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化当前页面高亮
|
||||
this.highlightCurrentPage();
|
||||
}
|
||||
|
||||
// 高亮当前页面导航链接
|
||||
highlightCurrentPage() {
|
||||
const currentPath = window.location.pathname;
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
const href = link.getAttribute('href');
|
||||
if (href && currentPath.includes(href.replace('.html', ''))) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化滚动效果
|
||||
initScrollEffects() {
|
||||
// 滚动时显示/隐藏元素
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察需要动画的元素
|
||||
document.querySelectorAll('.feature-card, .hero-content').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化平滑滚动
|
||||
initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const targetId = anchor.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化返回顶部按钮
|
||||
initBackToTop() {
|
||||
const backToTopBtn = document.createElement('button');
|
||||
backToTopBtn.id = 'backToTop';
|
||||
backToTopBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
|
||||
backToTopBtn.title = '返回顶部';
|
||||
document.body.appendChild(backToTopBtn);
|
||||
|
||||
// 滚动时显示/隐藏按钮
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 300) {
|
||||
backToTopBtn.classList.add('show');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// 点击返回顶部
|
||||
backToTopBtn.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化移动端菜单
|
||||
initMobileMenu() {
|
||||
const navbarToggler = document.querySelector('.navbar-toggler');
|
||||
const navbarCollapse = document.querySelector('.navbar-collapse');
|
||||
|
||||
if (!navbarToggler || !navbarCollapse) return;
|
||||
|
||||
navbarToggler.addEventListener('click', () => {
|
||||
navbarCollapse.classList.toggle('show');
|
||||
});
|
||||
|
||||
// 点击菜单项后自动关闭移动菜单
|
||||
document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
navbarCollapse.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化认证按钮状态
|
||||
initAuthButtons() {
|
||||
// 检查用户是否已登录
|
||||
this.checkLoginStatus().then(user => {
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const registerBtn = document.getElementById('registerBtn');
|
||||
const heroLoginBtn = document.getElementById('heroLoginBtn');
|
||||
|
||||
if (user) {
|
||||
// 用户已登录，显示仪表板按钮
|
||||
// 根据用户角色设置正确的仪表板路径
|
||||
let dashboardUrl = '/dashboard';
|
||||
if (user.role === 'student') {
|
||||
dashboardUrl = '/frontend/html/student_dashboard.html';
|
||||
} else if (user.role === 'teacher') {
|
||||
dashboardUrl = '/frontend/html/teacher_dashboard.html';
|
||||
} else if (user.role === 'admin') {
|
||||
dashboardUrl = '/frontend/html/admin_dashboard.html';
|
||||
}
|
||||
|
||||
if (loginBtn) {
|
||||
loginBtn.textContent = '进入仪表板';
|
||||
loginBtn.href = dashboardUrl;
|
||||
}
|
||||
if (heroLoginBtn) {
|
||||
heroLoginBtn.textContent = '进入仪表板';
|
||||
heroLoginBtn.href = dashboardUrl;
|
||||
}
|
||||
if (registerBtn) {
|
||||
registerBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 检查登录状态
|
||||
async checkLoginStatus() {
|
||||
try {
|
||||
const apiBase = window.location.protocol === 'file:' ? 'http://localhost:3000/api' : '/api';
|
||||
const response = await fetch(`${apiBase}/auth/me`);
|
||||
const data = await response.json();
|
||||
return data.success && data.user;
|
||||
} catch (error) {
|
||||
console.log('用户未登录');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示通知
|
||||
showNotification(message, type = 'info') {
|
||||
// 创建通知元素
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.innerHTML = `
|
||||
<div class="notification-content">
|
||||
<i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'}"></i>
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加到页面
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// 显示通知
|
||||
setTimeout(() => {
|
||||
notification.classList.add('show');
|
||||
}, 10);
|
||||
|
||||
// 自动隐藏
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new MainPage();
|
||||
});
|
||||
Reference in New Issue
Block a user