# HTML5的垃圾分類系統代碼實現
## 摘要
本文詳細介紹了基于HTML5技術的垃圾分類系統設計與實現過程。系統采用響應式布局適配多終端設備，結合本地存儲、Canvas數據可視化等HTML5特性，構建了一個完整的垃圾分類解決方案。文章包含核心功能模塊分析、關鍵技術實現細節以及完整代碼示例，為開發者提供可直接復用的技術方案。
---
## 1. 系統架構設計
### 1.1 技術棧組成
```mermaid
graph TD
A[前端] --> B[HTML5]
A --> C[CSS3]
A --> D[JavaScript ES6+]
B --> E[Web Storage]
B --> F[Canvas]
C --> G[Flexbox布局]
D --> H[IndexedDB]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垃圾分類系統</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
采用IndexedDB存儲分類規則：
const dbRequest = indexedDB.open('GarbageDB', 1);
dbRequest.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore('categories', { keyPath: 'id' });
store.createIndex('name', 'name', { unique: true });
// 初始化數據
store.put({id: 1, name: '可回收物', items: ['紙張','塑料','玻璃']});
store.put({id: 2, name: '有害垃圾', items: ['電池','藥品','燈管']});
// ...其他分類數據
};
<div class="image-upload">
<input type="file" id="uploader" accept="image/*">
<canvas id="previewCanvas"></canvas>
<button id="analyzeBtn">智能識別</button>
</div>
<script>
const uploader = document.getElementById('uploader');
uploader.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.onload = () => {
const canvas = document.getElementById('previewCanvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
function classifyByText(input) {
const keywords = {
recyclable: ['紙箱','報紙','塑料瓶'],
hazardous: ['電池','殺蟲劑','熒光燈'],
// ...其他分類關鍵詞
};
return new Promise((resolve) => {
// 模擬處理延遲
setTimeout(() => {
for (const [type, words] of Object.entries(keywords)) {
if (words.some(word => input.includes(word))) {
resolve(type);
}
}
resolve('other');
}, 500);
});
}
function drawChart(data) {
const canvas = document.getElementById('statsChart');
const ctx = canvas.getContext('2d');
const total = data.reduce((sum, item) => sum + item.value, 0);
let startAngle = 0;
data.forEach((item, index) => {
const sliceAngle = (item.value / total) * 2 * Math.PI;
ctx.beginPath();
ctx.fillStyle = getColor(index);
ctx.moveTo(150, 150);
ctx.arc(150, 150, 100, startAngle, startAngle + sliceAngle);
ctx.closePath();
ctx.fill();
startAngle += sliceAngle;
});
}
function updateLocalStats(category) {
let stats = JSON.parse(localStorage.getItem('classificationStats')) || {};
stats[category] = (stats[category] || 0) + 1;
localStorage.setItem('classificationStats', JSON.stringify(stats));
return stats;
}
<body>
<header>
<h1>智能垃圾分類系統</h1>
<nav>
<button data-page="home">首頁</button>
<button data-page="classify">分類識別</button>
<button data-page="stats">數據統計</button>
</nav>
</header>
<main id="appContainer">
<!-- 動態內容加載區 -->
</main>
<footer>
<p>? 2023 環?？萍脊?lt;/p>
</footer>
<script src="app.js" type="module"></script>
</body>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered');
});
});
}
<img data-src="recycle-icon.png" class="lazyload" alt="可回收">
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
</script>
// worker.js
self.onmessage = (e) => {
const result = heavyClassificationTask(e.data);
postMessage(result);
};
// 主線程
const worker = new Worker('worker.js');
worker.postMessage(inputData);
worker.onmessage = (e) => updateUI(e.data);
function checkCompatibility() {
const requiredFeatures = [
'indexedDB',
'Promise',
'IntersectionObserver'
];
const missing = requiredFeatures.filter(f => !(f in window));
if (missing.length) {
showPolyfillNotice(missing);
}
}
/* 基礎樣式 */
.category-card {
border: 1px solid #ccc;
padding: 10px;
}
/* 增強樣式 */
@supports (display: grid) {
.category-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
本文實現的HTML5垃圾分類系統具有以下技術優勢： 1. 跨平臺兼容性（支持PC/移動端） 2. 離線操作能力（IndexedDB+Service Worker） 3. 智能交互體驗（圖像/文本雙識別模式） 4. 數據可視化呈現（Canvas動態圖表）
完整項目代碼已開源在GitHub平臺，開發者可通過添加WebGL三維展示、接入真實識別API等方式進一步擴展系統功能。
”`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
