修改大屏，继续完善官网
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 页面加载动画
|
||||
initPageLoader();
|
||||
|
||||
// 初始化导航栏滚动效果
|
||||
initNavbarScroll();
|
||||
|
||||
@@ -11,8 +14,116 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 初始化数据统计动画
|
||||
initStatsCounter();
|
||||
|
||||
// 图片懒加载
|
||||
initLazyLoading();
|
||||
|
||||
// 性能优化
|
||||
initPerformanceOptimizations();
|
||||
});
|
||||
|
||||
// 页面加载动画
|
||||
function initPageLoader() {
|
||||
// 创建加载器
|
||||
const loader = document.createElement('div');
|
||||
loader.className = 'page-loader';
|
||||
loader.innerHTML = `
|
||||
<div class="loader-content">
|
||||
<div class="spinner"></div>
|
||||
<div class="loader-text">宁夏智慧养殖监管平台</div>
|
||||
<div class="loader-subtitle">正在加载中...</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(loader);
|
||||
|
||||
// 页面加载完成后隐藏加载器
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(() => {
|
||||
loader.classList.add('fade-out');
|
||||
setTimeout(() => {
|
||||
if (loader.parentNode) {
|
||||
loader.parentNode.removeChild(loader);
|
||||
}
|
||||
}, 500);
|
||||
}, 800);
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.add('lazy-image');
|
||||
|
||||
img.onload = () => {
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
}
|
||||
|
||||
// 性能优化
|
||||
function initPerformanceOptimizations() {
|
||||
// 导航栏滚动优化
|
||||
let ticking = false;
|
||||
|
||||
function updateNavbar() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateNavbar);
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 平滑滚动到锚点
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 预加载关键资源
|
||||
const criticalImages = [
|
||||
'assets/images/hero-bg.svg',
|
||||
'assets/images/logo.svg'
|
||||
];
|
||||
|
||||
criticalImages.forEach(src => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'preload';
|
||||
link.as = 'image';
|
||||
link.href = src;
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
// 导航栏滚动效果
|
||||
function initNavbarScroll() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
@@ -79,9 +190,12 @@ function validateForm(form) {
|
||||
if (input.hasAttribute('required') && !input.value.trim()) {
|
||||
showInputError(input, '此字段为必填项');
|
||||
isValid = false;
|
||||
} else if (input.type === 'email' && !isValidEmail(input.value)) {
|
||||
} else if (input.type === 'email' && input.value && !isValidEmail(input.value)) {
|
||||
showInputError(input, '请输入有效的邮箱地址');
|
||||
isValid = false;
|
||||
} else if (input.type === 'tel' && input.value && !isValidPhone(input.value)) {
|
||||
showInputError(input, '请输入有效的手机号码');
|
||||
isValid = false;
|
||||
} else {
|
||||
clearInputError(input);
|
||||
}
|
||||
@@ -90,6 +204,84 @@ function validateForm(form) {
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// 手机号验证
|
||||
function isValidPhone(phone) {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 提交联系表单
|
||||
function submitContactForm(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
if (!validateForm(form)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const data = {
|
||||
name: formData.get('name'),
|
||||
email: formData.get('email'),
|
||||
phone: formData.get('phone'),
|
||||
message: formData.get('message'),
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 显示提交中状态
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.innerHTML;
|
||||
submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>提交中...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// 模拟提交到后端（实际项目中替换为真实API）
|
||||
setTimeout(() => {
|
||||
// 这里应该是实际的API调用
|
||||
console.log('表单数据:', data);
|
||||
|
||||
// 显示成功消息
|
||||
showNotification('消息发送成功！我们会尽快回复您。', 'success');
|
||||
|
||||
// 重置表单
|
||||
form.reset();
|
||||
|
||||
// 恢复按钮状态
|
||||
submitBtn.innerHTML = originalText;
|
||||
submitBtn.disabled = false;
|
||||
|
||||
// 存储到本地（演示用）
|
||||
saveContactToLocal(data);
|
||||
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示通知消息
|
||||
function showNotification(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `alert alert-${type === 'success' ? 'success' : 'info'} alert-dismissible fade show position-fixed`;
|
||||
notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
||||
notification.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// 自动移除通知
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// 保存联系信息到本地存储（演示用）
|
||||
function saveContactToLocal(formData) {
|
||||
let contacts = JSON.parse(localStorage.getItem('contacts') || '[]');
|
||||
contacts.push(formData);
|
||||
localStorage.setItem('contacts', JSON.stringify(contacts));
|
||||
}
|
||||
|
||||
// 邮箱验证
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
Reference in New Issue
Block a user