添加 IntelliJ IDEA 项目配置文件
This commit is contained in:
ylweng
310
website/js/main.js
Normal file
310
website/js/main.js
Normal file
@@ -0,0 +1,310 @@
|
||||
// 活牛采购智能数字化系统官网 - 主JavaScript文件
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化所有功能
|
||||
initNavigation();
|
||||
initScrollEffects();
|
||||
initAnimations();
|
||||
initContactForm();
|
||||
initBackToTop();
|
||||
initImageLazyLoading();
|
||||
initFormValidation();
|
||||
|
||||
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
||||
});
|
||||
|
||||
// 导航功能初始化
|
||||
function initNavigation() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 滚动时导航栏样式变化
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
|
||||
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
||||
navbar.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 导航链接点击效果
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// 移除所有active类
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
// 添加当前active类
|
||||
this.classList.add('active');
|
||||
|
||||
// 平滑滚动到目标区域
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId && targetId.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动效果初始化
|
||||
function initScrollEffects() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in-up');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
const animateElements = document.querySelectorAll('.card, .feature-icon, h2, h3, p.lead');
|
||||
animateElements.forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 动画效果初始化
|
||||
function initAnimations() {
|
||||
// 数字统计动画
|
||||
const stats = document.querySelectorAll('.stat-number');
|
||||
if (stats.length > 0) {
|
||||
stats.forEach(stat => {
|
||||
const target = parseInt(stat.textContent);
|
||||
let current = 0;
|
||||
const duration = 2000; // 2秒
|
||||
const increment = target / (duration / 16); // 60fps
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
stat.textContent = target.toLocaleString();
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
stat.textContent = Math.floor(current).toLocaleString();
|
||||
}
|
||||
}, 16);
|
||||
});
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
const cards = document.querySelectorAll('.card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px)';
|
||||
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 联系表单初始化
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 表单验证
|
||||
if (!validateForm(contactForm)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(this);
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
// 显示加载状态
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="loading-spinner" role="status" aria-hidden="true"></span> 提交中...';
|
||||
|
||||
// 模拟表单提交
|
||||
setTimeout(() => {
|
||||
// 这里可以替换为实际的API调用
|
||||
showAlert('success', '提交成功！我们会尽快联系您。');
|
||||
contactForm.reset();
|
||||
|
||||
// 恢复按钮状态
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm(form) {
|
||||
let isValid = true;
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
|
||||
requiredFields.forEach(field => {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.classList.add('is-invalid');
|
||||
|
||||
// 创建错误提示
|
||||
if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = '此字段为必填项';
|
||||
field.parentNode.insertBefore(errorDiv, field.nextSibling);
|
||||
}
|
||||
} else {
|
||||
field.classList.remove('is-invalid');
|
||||
|
||||
// 移除错误提示
|
||||
if (field.nextElementSibling && field.nextElementSibling.classList.contains('invalid-feedback')) {
|
||||
field.nextElementSibling.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// 显示提示信息
|
||||
function showAlert(type, message) {
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// 添加到页面顶部
|
||||
document.body.insertBefore(alertDiv, document.body.firstChild);
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// 返回顶部功能
|
||||
function initBackToTop() {
|
||||
const backToTopBtn = document.createElement('button');
|
||||
backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
|
||||
backToTopBtn.className = 'btn btn-primary back-to-top';
|
||||
|
||||
document.body.appendChild(backToTopBtn);
|
||||
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 300) {
|
||||
backToTopBtn.style.display = 'block';
|
||||
} else {
|
||||
backToTopBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initImageLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
} else {
|
||||
// 降级处理
|
||||
images.forEach(img => {
|
||||
img.src = img.dataset.src;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证初始化
|
||||
function initFormValidation() {
|
||||
const forms = document.querySelectorAll('.needs-validation');
|
||||
|
||||
Array.from(forms).forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (!form.checkValidity()) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
// 工具函数：防抖
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 工具函数：节流
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 页面性能监控
|
||||
function monitorPerformance() {
|
||||
window.addEventListener('load', function() {
|
||||
// 页面加载完成时间
|
||||
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
||||
console.log(`页面加载完成时间: ${loadTime}ms`);
|
||||
|
||||
// 核心网页指标
|
||||
if ('loading' in HTMLImageElement.prototype) {
|
||||
console.log('浏览器支持原生懒加载');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化性能监控
|
||||
monitorPerformance();
|
||||
Reference in New Issue
Block a user