init: add initial project files for Mi Home smart home interface clone
This commit is contained in:
shenghuo2
332
scripts/main.js
Normal file
332
scripts/main.js
Normal file
@ -0,0 +1,332 @@
|
||||
// 页面切换功能
|
||||
function showPage(pageId) {
|
||||
// 隐藏所有页面
|
||||
const pages = document.querySelectorAll('.container');
|
||||
pages.forEach(page => {
|
||||
page.classList.add('hidden');
|
||||
});
|
||||
|
||||
// 显示目标页面
|
||||
const targetPage = document.getElementById(pageId);
|
||||
if (targetPage) {
|
||||
targetPage.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 更新底部导航状态
|
||||
updateBottomNav(pageId);
|
||||
}
|
||||
|
||||
// 更新底部导航状态
|
||||
function updateBottomNav(activePageId) {
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
navItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// 根据页面ID设置对应的导航项为活跃状态
|
||||
const pageNavMap = {
|
||||
'home-page': 0,
|
||||
'smart-page': 1,
|
||||
'mall-page': 2,
|
||||
'profile-page': 4
|
||||
};
|
||||
|
||||
const activeIndex = pageNavMap[activePageId];
|
||||
if (activeIndex !== undefined) {
|
||||
const currentPageNavItems = document.querySelectorAll(`#${activePageId} .nav-item`);
|
||||
if (currentPageNavItems[activeIndex]) {
|
||||
currentPageNavItems[activeIndex].classList.add('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设备控制功能
|
||||
function toggleDevice(deviceElement) {
|
||||
deviceElement.classList.toggle('active');
|
||||
|
||||
// 模拟设备状态切换
|
||||
const statusElement = deviceElement.querySelector('.device-status');
|
||||
const deviceName = deviceElement.querySelector('.device-name').textContent;
|
||||
|
||||
if (deviceElement.classList.contains('active')) {
|
||||
// 保持原有状态信息，只更新开启状态
|
||||
const originalStatus = statusElement.textContent;
|
||||
if (!originalStatus.includes('已开启')) {
|
||||
statusElement.textContent = originalStatus.replace('设备离线', '已开启');
|
||||
}
|
||||
showToast(`${deviceName} 已开启`);
|
||||
} else {
|
||||
// 恢复为离线状态
|
||||
const originalStatus = statusElement.textContent;
|
||||
statusElement.textContent = originalStatus.replace('已开启', '设备离线');
|
||||
showToast(`${deviceName} 已关闭`);
|
||||
}
|
||||
}
|
||||
|
||||
// 场景执行功能
|
||||
function executeScene(sceneName) {
|
||||
// 显示执行提示
|
||||
showToast(`正在执行"${sceneName}"场景...`);
|
||||
|
||||
// 模拟场景执行
|
||||
setTimeout(() => {
|
||||
showToast(`"${sceneName}"场景执行完成`);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 显示提示信息
|
||||
function showToast(message) {
|
||||
// 创建提示元素
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast';
|
||||
toast.textContent = message;
|
||||
|
||||
// 添加样式
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 9999;
|
||||
animation: fadeInOut 3s ease-in-out;
|
||||
`;
|
||||
|
||||
// 添加动画样式
|
||||
if (!document.querySelector('#toast-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'toast-styles';
|
||||
style.textContent = `
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
|
||||
20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// 3秒后移除提示
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 房间切换功能
|
||||
function switchRoom(roomName) {
|
||||
// 更新房间标签状态
|
||||
const roomTabs = document.querySelectorAll('.room-tab');
|
||||
roomTabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
if (tab.textContent === roomName) {
|
||||
tab.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 模拟房间设备过滤 - 显示/隐藏相关设备
|
||||
const deviceCards = document.querySelectorAll('.device-card');
|
||||
deviceCards.forEach(card => {
|
||||
const deviceStatus = card.querySelector('.device-status').textContent;
|
||||
|
||||
if (roomName === '全屋') {
|
||||
// 显示所有设备
|
||||
card.style.display = 'flex';
|
||||
} else {
|
||||
// 根据房间名称过滤设备
|
||||
if (deviceStatus.includes(roomName)) {
|
||||
card.style.display = 'flex';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
showToast(`已切换到"${roomName}"`);
|
||||
}
|
||||
|
||||
// 智能场景标签切换
|
||||
function switchSmartTab(tabName) {
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
if (tab.textContent === tabName) {
|
||||
tab.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// 根据标签显示不同内容
|
||||
if (tabName === '自定义') {
|
||||
showCustomScenes();
|
||||
} else {
|
||||
showRecommendedScenes();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示推荐场景
|
||||
function showRecommendedScenes() {
|
||||
// 这里可以动态加载推荐场景
|
||||
console.log('显示推荐场景');
|
||||
}
|
||||
|
||||
// 显示自定义场景
|
||||
function showCustomScenes() {
|
||||
const sceneSection = document.querySelector('.scene-section');
|
||||
if (sceneSection) {
|
||||
sceneSection.innerHTML = `
|
||||
<div class="scene-item">
|
||||
<div class="scene-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<i class="fas fa-plus"></i>
|
||||
</div>
|
||||
<div class="scene-info">
|
||||
<div class="scene-name">添加自定义场景</div>
|
||||
<div class="scene-desc">创建个性化的智能场景</div>
|
||||
</div>
|
||||
<button class="scene-button" onclick="showToast('功能开发中...')">创建</button>
|
||||
</div>
|
||||
<div class="scene-item">
|
||||
<div class="scene-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<div class="scene-info">
|
||||
<div class="scene-name">批量控制</div>
|
||||
<div class="scene-desc">空调关空调</div>
|
||||
</div>
|
||||
<button class="scene-button" onclick="executeScene('批量控制')">执行</button>
|
||||
</div>
|
||||
<div class="scene-item">
|
||||
<div class="scene-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
<div class="scene-info">
|
||||
<div class="scene-name">自动化</div>
|
||||
<div class="scene-desc">进入TP-LINK_9CC6-向手机发送通知</div>
|
||||
</div>
|
||||
<button class="scene-button" onclick="executeScene('自动化')">执行</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 绑定设备卡片点击事件
|
||||
const deviceCards = document.querySelectorAll('.device-card');
|
||||
deviceCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
toggleDevice(this);
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定场景按钮点击事件
|
||||
const sceneButtons = document.querySelectorAll('.scene-button');
|
||||
sceneButtons.forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
const sceneName = this.parentElement.querySelector('.scene-name').textContent;
|
||||
executeScene(sceneName);
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定房间标签点击事件
|
||||
const roomTabs = document.querySelectorAll('.room-tab');
|
||||
roomTabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
switchRoom(this.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定智能场景标签点击事件
|
||||
const smartTabs = document.querySelectorAll('.tab');
|
||||
smartTabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
switchSmartTab(this.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
// 底部导航切换
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
const targetPage = item.dataset.page;
|
||||
|
||||
// 特殊处理商城页面，显示外部链接
|
||||
if (targetPage === 'mall') {
|
||||
showPage('mall-page-external');
|
||||
} else {
|
||||
showPage(targetPage);
|
||||
}
|
||||
|
||||
// 更新导航状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 绑定菜单项点击事件
|
||||
const menuItems = document.querySelectorAll('.menu-item');
|
||||
menuItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const menuName = this.querySelector('span').textContent;
|
||||
showToast(`打开"${menuName}"功能`);
|
||||
});
|
||||
});
|
||||
|
||||
// 模拟实时数据更新
|
||||
setInterval(updateSensorData, 30000); // 每30秒更新一次传感器数据
|
||||
});
|
||||
|
||||
// 更新传感器数据
|
||||
function updateSensorData() {
|
||||
const tempDisplays = document.querySelectorAll('.temp-display');
|
||||
tempDisplays.forEach(display => {
|
||||
const currentTemp = parseFloat(display.textContent);
|
||||
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
|
||||
display.textContent = newTemp + '°';
|
||||
});
|
||||
|
||||
const humidityDisplays = document.querySelectorAll('.humidity-display');
|
||||
humidityDisplays.forEach(display => {
|
||||
const currentHumidity = parseInt(display.textContent);
|
||||
const newHumidity = Math.max(30, Math.min(70, currentHumidity + Math.floor((Math.random() - 0.5) * 10)));
|
||||
display.textContent = newHumidity + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// 添加触摸反馈
|
||||
function addTouchFeedback() {
|
||||
const interactiveElements = document.querySelectorAll('.device-card, .scene-item, .menu-item, .nav-item');
|
||||
|
||||
interactiveElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function() {
|
||||
this.style.transform = 'scale(0.95)';
|
||||
this.style.transition = 'transform 0.1s';
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 在页面加载完成后添加触摸反馈
|
||||
document.addEventListener('DOMContentLoaded', addTouchFeedback);
|
||||
|
||||
// 导出函数供HTML使用
|
||||
window.showPage = showPage;
|
||||
window.executeScene = executeScene;
|
||||
window.toggleDevice = toggleDevice;
|
||||
window.switchRoom = switchRoom;
|
||||
window.switchSmartTab = switchSmartTab;
|
||||
Reference in New Issue
Block a user