企业官网建设流程全解析

阿里云除了做网站还能用来干什么,早痿阳泄怎么治疗最快,iis默认网站删除,企业建设网站公司有哪些家庭园艺种植提醒工具下面是一个完整的家庭园艺种植提醒工具#xff0c;专为养花爱好者特别是记忆力不佳的老年人设计。这个工具可以帮助用户记录植物信息、设置养护周期、接收提醒并记录养护日志。!DOCTYPE html html langzh-CN head专为养花爱好者特别是记忆力不佳的老年人设计。这个工具可以帮助用户记录植物信息、设置养护周期、接收提醒并记录养护日志。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title家庭园艺种植提醒工具/title link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #e6f7ee, #c8e6d5); color: #333; line-height: 1.6; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; padding: 30px 0; background: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-bottom: 30px; } h1 { color: #2e7d32; font-size: 2.8rem; margin-bottom: 10px; } .subtitle { color: #43a047; font-size: 1.2rem; max-width: 700px; margin: 0 auto; } .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } } .card { background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); padding: 25px; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } .card-title { color: #2e7d32; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e0f2e9; display: flex; align-items: center; gap: 10px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 600; color: #388e3c; } input, select { width: 100%; padding: 12px 15px; border: 2px solid #c8e6c9; border-radius: 8px; font-size: 16px; transition: border-color 0.3s; } input:focus, select:focus { outline: none; border-color: #4caf50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); } button { background: #4caf50; color: white; border: none; padding: 14px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; width: 100%; transition: background 0.3s; display: flex; justify-content: center; align-items: center; gap: 8px; } button:hover { background: #388e3c; } .btn-secondary { background: #81c784; } .btn-secondary:hover { background: #66bb6a; } .plant-list { max-height: 400px; overflow-y: auto; padding-right: 10px; } .plant-item { background: #f1f8e9; border-radius: 10px; padding: 15px; margin-bottom: 15px; border-left: 4px solid #4caf50; position: relative; } .plant-name { font-weight: bold; font-size: 18px; color: #2e7d32; margin-bottom: 5px; } .plant-detail { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; } .days-left { font-weight: bold; padding: 3px 8px; border-radius: 12px; font-size: 12px; } .urgent { background: #ffecb3; color: #ff9800; } .warning { background: #ffcdd2; color: #f44336; } .normal { background: #c8e6c9; color: #2e7d32; } .actions { display: flex; gap: 10px; margin-top: 10px; } .action-btn { flex: 1; padding: 8px; font-size: 14px; } .reminders { margin-top: 20px; } .reminder-item { background: #fff8e1; border-radius: 10px; padding: 15px; margin-bottom: 15px; display: flex; align-items: center; gap: 15px; border-left: 4px solid #ffc107; } .reminder-icon { font-size: 24px; color: #ff9800; } .log-entry { padding: 10px 0; border-bottom: 1px dashed #e0e0e0; } .log-time { font-size: 12px; color: #757575; } .notification { position: fixed; top: 20px; right: 20px; background: #4caf50; color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; align-items: center; gap: 10px; transform: translateX(200%); transition: transform 0.5s ease; } .notification.show { transform: translateX(0); } .empty-state { text-align: center; padding: 40px 20px; color: #757575; } .empty-state i { font-size: 48px; margin-bottom: 15px; color: #c8e6c9; } footer { text-align: center; margin-top: 40px; padding: 20px; color: #666; font-size: 14px; } .tabs { display: flex; margin-bottom: 20px; background: #e8f5e9; border-radius: 10px; overflow: hidden; } .tab { flex: 1; padding: 12px; text-align: center; cursor: pointer; transition: background 0.3s; } .tab.active { background: #4caf50; color: white; } .tab-content { display: none; } .tab-content.active { display: block; } /style /head body div classcontainer header h1i classfas fa-seedling/i 家庭园艺种植提醒工具/h1 p classsubtitle专为爱花人士设计轻松管理植物养护周期让您的花园生机勃勃/p /header div classmain-content div classcard h2 classcard-titlei classfas fa-plus-circle/i 添加新植物/h2 form idplant-form div classform-group label forplant-name植物名称/label input typetext idplant-name placeholder例如绿萝、月季... required /div div classform-group label forplant-type植物类型/label select idplant-type option valueflower花卉/option option valuefoliage观叶植物/option option valuesucculent多肉植物/option option valueherb香草植物/option option valuevegetable蔬菜/option option valuetree树木/option /select /div div classform-group label forplant-date种植日期/label input typedate idplant-date required /div div classform-group label forwater-cycle浇水周期 (天)/label input typenumber idwater-cycle min1 max365 value7 required /div div classform-group label forfertilizer-cycle施肥周期 (天)/label input typenumber idfertilizer-cycle min1 max365 value30 required /div div classform-group label fornotes养护备注/label input typetext idnotes placeholder例如喜阴、需定期修剪... /div button typesubmiti classfas fa-plus/i 添加植物/button /form div classreminders h2 classcard-titlei classfas fa-bell/i 待办提醒/h2 div idreminders-container !-- 提醒内容将通过JS动态生成 -- div classempty-state i classfas fa-check-circle/i p暂无待办提醒/p /div /div /div /div div classcard div classtabs div classtab active data-tabplants我的植物/div div classtab data-tablogs养护日志/div /div div classtab-content active idplants-tab h2 classcard-titlei classfas fa-leaf/i 植物列表/h2 div classplant-list idplant-list !-- 植物列表将通过JS动态生成 -- div classempty-state i classfas fa-seedling/i p您尚未添加任何植物/p p请在左侧添加您的第一株植物/p /div /div /div div classtab-content idlogs-tab h2 classcard-titlei classfas fa-book/i 养护日志/h2 div idlog-container !-- 日志内容将通过JS动态生成 -- div classempty-state i classfas fa-book-open/i p暂无养护记录/p /div /div /div /div /div div classnotification idnotification i classfas fa-bell/i span idnotification-text提醒内容/span /div footer p家庭园艺种植提醒工具 copy; 2023 | 让园艺更简单生活更美好/p p专为爱花人士设计特别适合记忆力不佳的老年朋友/p /footer /div script // 示例植物数据 const samplePlants [ { id: 1, name: 绿萝, type: foliage, plantDate: 2023-05-10, waterCycle: 5, fertilizerCycle: 30, notes: 喜阴避免阳光直射, lastWatered: 2023-07-15, lastFertilized: 2023-06-20 }, { id: 2, name: 月季, type: flower, plantDate: 2023-04-22, waterCycle: 3, fertilizerCycle: 15, notes: 需要充足阳光定期修剪, lastWatered: 2023-07-17, lastFertilized: 2023-07-01 }, { id: 3, name: 多肉组合, type: succulent, plantDate: 2023-06-05, waterCycle: 10, fertilizerCycle: 60, notes: 耐旱宁干勿湿, lastWatered: 2023-07-10, lastFertilized: 2023-05-15 } ]; // 初始化应用 document.addEventListener(DOMContentLoaded, function() { // 设置默认日期为今天 const today new Date().toISOString().split(T)[0]; document.getElementById(plant-date).value today; // 加载植物数据优先使用本地存储否则使用示例数据 let plants JSON.parse(localStorage.getItem(gardenPlants)) || samplePlants; let logs JSON.parse(localStorage.getItem(gardenLogs)) || []; // 渲染植物列表 renderPlantList(plants); // 渲染日志 renderLogs(logs); // 检查提醒 checkReminders(plants); // 表单提交事件 document.getElementById(plant-form).addEventListener(submit, function(e) { e.preventDefault(); addNewPlant(plants, logs); }); // 标签切换 document.querySelectorAll(.tab).forEach(tab { tab.addEventListener(click, function() { // 移除所有active类 document.querySelectorAll(.tab).forEach(t t.classList.remove(active)); document.querySelectorAll(.tab-content).forEach(c c.classList.remove(active)); // 添加active类到当前标签 this.classList.add(active); document.getElementById(${this.dataset.tab}-tab).classList.add(active); }); }); }); // 添加新植物 function addNewPlant(plants, logs) { const name document.getElementById(plant-name).value; const type document.getElementById(plant-type).value; const plantDate document.getElementById(plant-date).value; const waterCycle parseInt(document.getElementById(water-cycle).value); const fertilizerCycle parseInt(document.getElementById(fertilizer-cycle).value); const notes document.getElementById(notes).value; const newPlant { id: Date.now(), // 使用时间戳作为ID name, type, plantDate, waterCycle, fertilizerCycle, notes, lastWatered: plantDate, lastFertilized: plantDate }; plants.push(newPlant); savePlants(plants); renderPlantList(plants); // 添加日志 addLog(logs, newPlant.id, newPlant.name, 添加新植物); renderLogs(logs); // 重置表单 document.getElementById(plant-form).reset(); document.getElementById(plant-date).value new Date().toISOString().split(T)[0]; showNotification(成功添加植物: ${name}); } // 渲染植物列表 function renderPlantList(plants) { const container document.getElementById(plant-list); if (plants.length 0) { container.innerHTML div classempty-state i classfas fa-seedling/i p您尚未添加任何植物/p p请在左侧添加您的第一株植物/p /div ; return; } container.innerHTML ; plants.forEach(plant { // 计算下次浇水/施肥日期 const nextWater calculateNextDate(plant.lastWatered, plant.waterCycle); const nextFertilize calculateNextDate(plant.lastFertilized, plant.fertilizerCycle); // 计算剩余天数 const daysToWater calculateDaysLeft(nextWater); const daysToFertilize calculateDaysLeft(nextFertilize); // 确定状态样式 const waterStatus getStatusClass(daysToWater); const fertilizerStatus getStatusClass(daysToFertilize); const plantItem document.createElement(div); plantItem.className plant-item; plantItem.innerHTML div classplant-name${plant.name}/div div classplant-detail span种植日期:/span span${formatDate(plant.plantDate)}/span /div div classplant-detail span浇水周期:/span span每 ${plant.waterCycle} 天/span /div div classplant-detail span下次浇水:/span span classdays-left ${waterStatus}${formatDate(nextWater)} (${daysToWater}天后)/span /div div classplant-detail span施肥周期:/span span每 ${plant.fertilizerCycle} 天/span /div div classplant-detail span下次施肥:/span span classdays-left ${fertilizerStatus}${formatDate(nextFertilize)} (${daysToFertilize}天后)/span /div ${plant.notes ? div classplant-detailspan备注:/span span${plant.notes}/span/div : } div classactions button classbtn-secondary action-btn onclickwaterPlant(${plant.id}, ${plant.name}) i classfas fa-tint/i 浇水 /button button classbtn-secondary action-btn onclickfertilizePlant(${plant.id}, ${plant.name}) i classfas fa-flask/i 施肥 /button button classaction-btn onclickdeletePlant(${plant.id}, ${plant.name}) stylebackground:#f44336; i classfas fa-trash/i /button /div ; container.appendChild(plantItem); }); } // 浇水操作 function waterPlant(id, name) { const plants JSON.parse(localStorage.getItem(gardenPlants)) || []; const plant plants.find(p p.id id); if (plant) { plant.lastWatered new Date().toISOString().split(T)[0]; savePlants(plants); renderPlantList(plants); const logs JSON.parse(localStorage.getItem(gardenLogs)) || []; addLog(logs, id, name, 浇水); renderLogs(logs); showNotification(已为 ${name} 浇水); } } // 施肥操作 function fertilizePlant(id, name) { const plants JSON.parse(localStorage.getItem(gardenPlants)) || []; const plant plants.find(p p.id id); if (plant) { plant.lastFertilized new Date().toISOString().split(T)[0]; savePlants(plants); renderPlantList(plants); const logs JSON.parse(localStorage.getItem(gardenLogs)) || []; addLog(logs, id, name, 施肥); renderLogs(logs); showNotification(已为 ${name} 施肥); } } // 删除植物 function deletePlant(id, name) { if (confirm(确定要删除 ${name} 吗)) { let plants JSON.parse(localStorage.getItem(gardenPlants)) || []; plants plants.filter(p p.id ! id); savePlants(plants); renderPlantList(plants); showNotification(已删除植物: ${name}); } } // 添加日志 function addLog(logs, plantId, plantName, action) { const now new Date(); const logEntry { id: Date.now(), plantId, plantName, action, timestamp: now.toISOString() }; logs.unshift(logEntry); saveLogs(logs); } // 渲染日志 function renderLogs(logs) { const container document.getElementById(log-container); if (logs.length 0) { container.innerHTML div classempty-state i classfas fa-book-open/i p暂无养护记录/p /div ; return; } container.innerHTML ; // 只显示最近的20条日志 const recentLogs logs.slice(0, 20); recentLogs.forEach(log { const logEntry document.createElement(div); logEntry.className log-entry; logEntry.innerHTML divstrong${log.plantName}/strong - ${log.action}/div div classlog-time${formatDateTime(log.timestamp)}/div ; container.appendChild(logEntry); }); } // 检查提醒 function checkReminders(plants) { const container document.getElementById(reminders-container); container.innerHTML ; const now new Date(); let hasReminders false; plants.forEach(plant { const nextWater calculateNextDate(plant.lastWatered, plant.waterCycle); const nextFertilize calculateNextDate(plant.lastFertilized, plant.fertilizerCycle); const daysToWater calculateDaysLeft(nextWater); const daysToFertilize calculateDaysLeft(nextFertilize); // 如果需要在3天内浇水或施肥则显示提醒 if (daysToWater 3 daysToWater 0) { hasReminders true; const reminder createReminderElement( plant.name, 浇水, daysToWater, nextWater, plant.id ); container.appendChild(reminder); } if (daysToFertilize 3 daysToFertilize 0) { hasReminders true; const reminder createReminderElement( plant.name, 施肥, daysToFertilize, nextFertilize, plant.id ); container.appendChild(reminder); } }); if (!hasReminders) { container.innerHTML div classempty-state i classfas fa-check-circle/i p暂无待办提醒/p /div ; } } // 创建提醒元素 function createReminderElement(plantName, action, daysLeft, dueDate, plantId) { const reminder document.createElement(div); reminder.className reminder-item; reminder.innerHTML div classreminder-icon i classfas fa-exclamation-circle/i /div div strong${plantName}/strong 需要${action}了 div剩余时间: ${daysLeft}天 (${formatDate(dueDate)})/div /div button classbtn-secondary onclick${action 浇水 ? waterPlant(${plantId}, ${plantName}) : fertilizePlant(${plantId}, ${plantName})} stylemargin-left:auto;width:auto;padding:8px 15px; i classfas fa-${action 浇水 ? tint : flask}/i 立即${action} /button ; return reminder; } // 辅助函数计算下次日期 function calculateNextDate(lastDate, cycle) { const date new Date(lastDate); date.setDate(date.getDate() cycle); return date.toISOString().split(T)[0]; } // 辅助函数计算剩余天数 function calculateDaysLeft(targetDate) { const target new Date(targetDate); const now new Date(); const diffTime target - now; return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); } // 辅助函数获取状态类名 function getStatusClass(daysLeft) { if (daysLeft 0) return warning; // 过期 if (daysLeft 2) return urgent; // 紧急 return normal; // 正常 } // 辅助函数格式化日期 function formatDate(dateString) { const options { year: numeric, month: long, day: numeric }; return new Date(dateString).toLocaleDateString(zh-CN, options); } // 辅助函数格式化日期和时间 function formatDateTime(dateTimeString) { const date new Date(dateTimeString); return ${date.getFullYear()}-${(date.getMonth()1).toString().padStart(2, 0)}-${date.getDate().toString().padStart(2, 0)} ${date.getHours().toString().padStart(2, 0)}:${date.getMinutes().toString().padStart(2, 0)}; } // 辅助函数显示通知 function showNotification(message) { const notification document.getElementById(notification); const notificationText document.getElementById(notification-text); notificationText.textContent message; notification.classList.add(show); setTimeout(() { notification.classList.remove(show); }, 3000); } // 保存植物数据 function savePlants(plants) { localStorage.setItem(gardenPlants, JSON.stringify(plants)); } // 保存日志数据 function saveLogs(logs) { localStorage.setItem(gardenLogs, JSON.stringify(logs)); } /script /body /html功能说明这个家庭园艺种植提醒工具具有以下核心功能植物信息管理添加新植物名称、类型、种植日期设置浇水周期和施肥周期添加养护备注查看所有植物列表及详细信息智能提醒系统自动计算下次浇水/施肥日期根据剩余天数显示不同状态正常/紧急/过期提前3天显示待办提醒一键完成浇水/施肥操作养护日志记录自动记录所有养护操作添加、浇水、施肥按时间倒序显示最近20条记录显示操作时间和具体动作用户友好设计大字体和清晰布局适合老年人使用直观的状态颜色标识绿色正常橙色紧急红色过期响应式设计适配各种设备屏幕本地存储数据关闭页面不会丢失信息使用指南在左侧表单中输入植物信息设置合适的浇水和施肥周期单位天点击添加植物按钮保存信息在主界面查看所有植物及其养护状态当收到提醒时点击立即浇水或立即施肥按钮记录操作在养护日志标签页查看所有历史操作记录这个工具特别适合记忆力不佳的老年园艺爱好者帮助他们轻松管理多种植物的养护周期确保植物健康生长。我是编程小白请大家多多指教谢谢