单机版保质期管理系统 HTML 实现及开发要点

### 🍱实现思路我们将创建一个单机版的 HTML 网页来实现保质期管理系统，利用 HTML、CSS 和 JavaScript 来完成各项功能。使用 `localStorage` 作为数据库来保存和还原数据，使用 `FileSaver.js` 库实现表格导出功能，通过 JavaScript 实现自动和手动刷新功能，以及仪表盘的统计功能。 ### 🔧准备工作 - **依赖**：`FileSaver.js` 用于导出文件。可以从 [GitHub 仓库](https://github.com/eligrey/FileSaver.js) 下载，或者使用 CDN 引入。 - **安装命令**：如果使用 CDN，无需安装，直接在 HTML 文件中引入即可。 ### 📝代码实现 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>保质期管理系统</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } th { background-color: #f2f2f2; } .black { background-color: black; color: white; } .red { background-color: red; color: white; } .yellow { background-color: yellow; } .green { background-color: green; color: white; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> </head> <body> <h1>保质期管理系统</h1> <button onclick="refreshData()">手动刷新</button> <button onclick="exportTable()">导出表格</button> <button onclick="saveData()">保存数据</button> <button onclick="restoreData()">还原数据</button> <div id="dashboard"></div> <table id="productTable"> <thead> <tr> <th>产品名称</th> <th>生产日期</th> <th>保质期</th> <th>到期日期</th> <th>剩余天数</th> </tr> </thead> <tbody>  </tbody> </table> <script> // 从 localStorage 中获取数据 const storedData = localStorage.getItem('productData'); let productData = storedData ? JSON.parse(storedData) : []; // 自动刷新，在页面加载和一段时间无操作后刷新 let idleTime = 0; const idleTimeout = 60 * 1000; // 1 分钟无操作后刷新 document.addEventListener('mousemove', resetIdleTime); document.addEventListener('keydown', resetIdleTime); function resetIdleTime() { idleTime = 0; } setInterval(() => { idleTime += 1000; if (idleTime >= idleTimeout) { refreshData(); idleTime = 0; } }, 1000); // 手动刷新函数 function refreshData() { const tableBody = document.getElementById('productTable').getElementsByTagName('tbody')[0]; tableBody.innerHTML = ''; productData.forEach((product, index) => { const row = tableBody.insertRow(); const nameCell = row.insertCell(0); const productionDateCell = row.insertCell(1); const shelfLifeCell = row.insertCell(2); const expirationDateCell = row.insertCell(3); const remainingDaysCell = row.insertCell(4); nameCell.textContent = product.name; productionDateCell.textContent = product.productionDate; shelfLifeCell.textContent = product.shelfLife; const expirationDate = calculateExpirationDate(product.productionDate, product.shelfLife); expirationDateCell.textContent = expirationDate; const remainingDays = calculateRemainingDays(expirationDate); remainingDaysCell.textContent = remainingDays; if (remainingDays <= 0) { remainingDaysCell.classList.add('black'); } else if (remainingDays <= 7) { remainingDaysCell.classList.add('red'); } else if (remainingDays <= 30) { remainingDaysCell.classList.add('yellow'); } else { remainingDaysCell.classList.add('green'); } }); // 排序 const rows = Array.from(tableBody.rows); rows.sort((a, b) => { const daysA = parseInt(a.cells[4].textContent); const daysB = parseInt(b.cells[4].textContent); return daysA - daysB; }); rows.forEach(row => tableBody.appendChild(row)); // 更新仪表盘 updateDashboard(); } // 计算到期日期 function calculateExpirationDate(productionDate, shelfLife) { const date = new Date(productionDate); if (shelfLife.endsWith('天')) { const days = parseInt(shelfLife.replace('天', '')); date.setDate(date.getDate() + days); } else if (shelfLife.endsWith('个月')) { const months = parseInt(shelfLife.replace('个月', '')); date.setMonth(date.getMonth() + months); } return date.toLocaleDateString(); } // 计算剩余天数 function calculateRemainingDays(expirationDate) { const today = new Date(); const expDate = new Date(expirationDate); const timeDiff = expDate - today; return Math.floor(timeDiff / (1000 * 60 * 60 * 24)); } // 导出表格 function exportTable() { let csvContent = "data:text/csv;charset=utf-8,"; const headers = ["产品名称", "生产日期", "保质期", "到期日期", "剩余天数"]; csvContent += headers.join(",") + "\n"; productData.forEach(product => { const expirationDate = calculateExpirationDate(product.productionDate, product.shelfLife); const remainingDays = calculateRemainingDays(expirationDate); const row = [ product.name, product.productionDate, product.shelfLife, expirationDate, remainingDays ]; csvContent += row.join(",") + "\n"; }); const encodedUri = encodeURI(csvContent); const blob = new Blob([decodeURIComponent(encodedUri)], { type: 'text/csv;charset=utf-8;' }); saveAs(blob, "便利店保质期_2026.csv"); } // 保存数据到 localStorage function saveData() { localStorage.setItem('productData', JSON.stringify(productData)); alert('数据已保存'); } // 从 localStorage 还原数据 function restoreData() { const storedData = localStorage.getItem('productData'); if (storedData) { productData = JSON.parse(storedData); refreshData(); alert('数据已还原'); } else { alert('没有保存的数据'); } } // 更新仪表盘 function updateDashboard() { const dashboard = document.getElementById('dashboard'); let expiredCount = 0; let soonExpireCount = 0; let nearReminderCount = 0; let safeCount = 0; productData.forEach(product => { const expirationDate = calculateExpirationDate(product.productionDate, product.shelfLife); const remainingDays = calculateRemainingDays(expirationDate); if (remainingDays <= 0) { expiredCount++; } else if (remainingDays <= 7) { soonExpireCount++; } else if (remainingDays <= 30) { nearReminderCount++; } else { safeCount++; } }); dashboard.innerHTML = ` <p>已过期: ${expiredCount}</p> <p>即将过期: ${soonExpireCount}</p> <p>临近提醒: ${nearReminderCount}</p> <p>安全期: ${safeCount}</p> `; } // 页面加载时刷新数据 window.onload = refreshData; </script> </body> </html> ``` ### 📋代码解释 1. **HTML 部分**：创建了一个简单的页面结构，包含按钮、仪表盘和表格。 2. **CSS 部分**：对表格进行了美化，设置了不同颜色的预警样式。 3. **JavaScript 部分**： - 使用 `localStorage` 保存和还原数据。 - 实现了自动和手动刷新功能，自动刷新在一段时间无操作后触发。 - 利用 `FileSaver.js` 实现表格导出为 CSV 文件。 - 计算到期日期和剩余天数，并根据剩余天数设置不同的颜色预警。 - 更新仪表盘的统计信息。 ### ⚙️进阶使用指南 - **性能优化**：可以使用虚拟列表来处理大量数据，减少 DOM 操作。 - **错误处理**：在计算日期和保存数据时添加错误处理，避免程序崩溃。 - **扩展功能**：添加数据添加、删除和编辑功能，方便用户管理数据。 - **安全建议**：对用户输入进行验证，防止 XSS 攻击。 - **常见陷阱规避**：注意日期格式的兼容性，避免在不同浏览器中出现问题。 ### 📚相关技术栈推荐和学习资源 - **HTML、CSS、JavaScript**：基础的前端技术，官方文档可以在 [MDN Web Docs](https://developer.mozilla.org/) 上找到。 - **FileSaver.js**：用于文件导出，官方 GitHub 仓库：[FileSaver.js](https://github.com/eligrey/FileSaver.js)。 ### 💡开发建议 - 代码结构要清晰，将不同功能封装成独立的函数，提高代码的可维护性。 - 对用户输入进行验证，确保数据的合法性。 - 添加注释，方便后续维护和理解代码。 ######[AI写代码神器 | 2458点数解答 | 2026-04-01 06:49:18]

服务商

更多选项

快捷项

自定义