KunWeb/ciyon/web/js/common.js

155 lines
5.3 KiB
JavaScript

// 公共脚本(夜间模式、语言切换等)
const nightIcon = document.querySelector('.night-icon');
const langIcon = document.querySelector('.lang-icon');
const langMenu = document.querySelector('.lang-menu');
// 地球图标
const globe_div = document.querySelector('.globe-icon');
// let globe = globe_div.innerHTML;
var f = 0;
console.log(globe_div);
const langItems = document.querySelectorAll('.lang-item');
const light = document.querySelector('.light');
const body = document.body;
let isNightMode = false;
nightIcon.onclick = function() {
isNightMode = !isNightMode;
if (isNightMode) {
body.classList.add('night-mode');
nightIcon.classList.add('active');
nightIcon.innerHTML = '☀️';
light.textContent = '明';
} else {
body.classList.remove('night-mode');
nightIcon.classList.remove('active');
nightIcon.innerHTML = '🌙';
light.textContent = '暗';
}
};
langIcon.onclick = function(e) {
e.stopPropagation();
langMenu.classList.toggle('show');
if(f == 0){
globe_div.innerHTML = 'X';
f = 1;
}else{
globe_div.innerHTML = '🌐';
f = 0;
}
// if(f == 1){
// globe_div.innerHTML = '🌐';
// f = 0;
// }
// console.log(1);
};
langIcon.addEventListener('focus',function(){
alert("1");
});
langItems.forEach(item => {
item.onclick = function() {
langItems.forEach(li => li.classList.remove('active'));
this.classList.add('active');
langMenu.classList.remove('show');
};
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.theme-lang-switch')) {
langMenu.classList.remove('show');
}
});
langMenu.onclick = function(e) { e.stopPropagation(); };
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
document.querySelector('.header').style.boxShadow = '0 4px 16px rgba(0,0,0,0.7)';
} else {
document.querySelector('.header').style.boxShadow = '0 2px 8px rgba(0,0,0,0.5)';
}
});
// 活动分类切换脚本
const navItems = document.querySelectorAll('.activity-nav-item');
const activityItems = document.querySelectorAll('.activity-item');
navItems.forEach(item => {
item.addEventListener('click', () => {
// 切换导航激活状态
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');
// 筛选活动
const type = item.dataset.type;
activityItems.forEach(activity => {
if (type === 'all' || activity.dataset.type === type) {
activity.style.display = 'grid';
} else {
activity.style.display = 'none';
}
});
});
});
const name1 = document.querySelector('.form-group #name');
const phone = document.querySelector('.form-group #phone');
const btn = document.querySelector('.submit-btn');
btn.addEventListener('click',function(e){
console.log(name1.value);
if(name1.value!='' && phone.value!=''){
alert("我们将尽快给您答复!!!")
}
if(name1.value==''){
alert("请输入姓名!!!");
e.preventDefault();
}else if(phone.value==''){
alert("请输入手机号!!!");
e.preventDefault();
}
});
document.addEventListener('DOMContentLoaded', function() {
const toggleBtn = document.querySelector('.mobile-nav-toggle');
const navList = document.querySelector('.nav-list');
// 控制台打印验证元素是否找到
console.log('汉堡按钮:', toggleBtn);
console.log('导航列表:', navList);
// 2. 只有找到元素时才绑定点击事件
if (toggleBtn && navList) {
toggleBtn.addEventListener('click', function() {
navList.classList.toggle('show');
});
}
});
document.addEventListener('DOMContentLoaded', function() {
// 仅移动端生效
const isMobile = () => window.innerWidth <= 768;
const submenuToggle = document.querySelector('.has-submenu > a');
const submenu = document.querySelector('.submenu');
// 移动端点击展开/收起子菜单
submenuToggle.addEventListener('click', function(e) {
if (isMobile()) {
e.preventDefault();
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}
});
// 窗口缩放时重置
window.addEventListener('resize', function() {
if (!isMobile()) {
submenu.style.display = '';
}
});
});