NFC識別功能實現(xiàn)
我將創(chuàng)建一個具有NFC識別功能的HTML頁面，使用Web NFC API（目前主要支持Chrome for Android）。這個頁面將包含NFC狀態(tài)顯示、讀取功能、模擬數(shù)據(jù)以及操作日志。 使用現(xiàn)代UI設(shè)計，采用卡片式布局 實現(xiàn)NFC檢測和讀取功能 添加模擬數(shù)據(jù)用于演示 創(chuàng)建操作日志顯示NFC活動 添加響應(yīng)式設(shè)計確保移動設(shè)備兼容性 NFC支持檢測：頁面加載時會自動檢測瀏覽器是否支持Web NFC API NFC掃描：點擊"開始掃描NFC"按鈕后，系統(tǒng)會嘗試讀取NFC標(biāo)簽數(shù)據(jù) 數(shù)據(jù)模擬：提供模擬NFC數(shù)據(jù)功能，用于演示目的 操作日志：記錄所有NFC相關(guān)操作和狀態(tài)變化 響應(yīng)式設(shè)計：頁面布局會自動適應(yīng)不同屏幕尺寸 請注意，Web NFC API目前主要支持Chrome for Android，并且需要HTTPS環(huán)境（本地localhost開發(fā)除外）。在其他瀏覽器或環(huán)境中，頁面將顯示NFC不支持的狀態(tài)，但您仍然可以使用模擬功能查看演示效果。 您可以將此代碼保存為HTML文件，然后在支持的瀏覽器中打開使用。設(shè)計思路
最終實現(xiàn)代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NFC識別系統(tǒng)</title> <link rel="stylesheet" href="https://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, #1a2a6c, #b21f1f, #fdbb2d); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; } .container { width: 100%; max-width: 900px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } header { background: #2c3e50; color: white; padding: 25px; text-align: center; position: relative; } h1 { font-size: 2.2rem; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 15px; } .header-icon { font-size: 2rem; } .subtitle { font-size: 1.1rem; opacity: 0.8; margin-bottom: 10px; } .status-bar { display: flex; justify-content: center; align-items: center; background: #34495e; padding: 10px; color: white; font-size: 1rem; } .status { display: flex; align-items: center; gap: 8px; } .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #e74c3c; } .status-dot.active { background: #2ecc71; } .content { padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } @media (max-width: 768px) { .content { grid-template-columns: 1fr; } } .card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } .card-title { font-size: 1.4rem; margin-bottom: 20px; color: #2c3e50; display: flex; align-items: center; gap: 10px; } .card-icon { font-size: 1.6rem; color: #3498db; } .nfc-data { min-height: 200px; } .data-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .data-label { font-weight: 600; color: #7f8c8d; margin-bottom: 5px; } .data-value { font-size: 1.2rem; word-break: break-all; } .actions { display: flex; flex-direction: column; gap: 15px; } .btn { padding: 15px; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; } .btn-primary { background: #3498db; color: white; } .btn-primary:hover { background: #2980b9; } .btn-secondary { background: #e74c3c; color: white; } .btn-secondary:hover { background: #c0392b; } .btn-success { background: #2ecc71; color: white; } .btn-success:hover { background: #27ae60; } .log-container { max-height: 300px; overflow-y: auto; background: #f8f9fa; border-radius: 10px; padding: 15px; } .log-entry { padding: 10px; border-bottom: 1px solid #eee; font-family: monospace; } .log-time { color: #7f8c8d; margin-right: 10px; } .log-message { color: #2c3e50; } .success { color: #27ae60; } .error { color: #e74c3c; } .info { color: #3498db; } footer { text-align: center; padding: 20px; background: #ecf0f1; color: #7f8c8d; font-size: 0.9rem; } .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } </style> </head> <body> <div> <header> <h1><i class="fas fa-nfc-signal header-icon"></i> NFC識別系統(tǒng)</h1> <p>近場通信標(biāo)簽識別與數(shù)據(jù)讀取</p> </header> <div> <div> <div id="statusDot"></div> <span id="statusText">正在檢查NFC支持...</span> </div> </div> <div> <div class="card nfc-data"> <h2><i class="fas fa-database card-icon"></i> NFC數(shù)據(jù)</h2> <div id="nfcContent"> <div> <div>標(biāo)簽ID</div> <div>等待讀取...</div> </div> <div> <div>標(biāo)簽類型</div> <div>-</div> </div> <div> <div>數(shù)據(jù)內(nèi)容</div> <div>-</div> </div> <div> <div>讀取時間</div> <div>-</div> </div> </div> </div> <div> <h2><i class="fas fa-sliders-h card-icon"></i> 操作</h2> <div> <button class="btn btn-primary" id="scanBtn"> <i class="fas fa-rss"></i> 開始掃描NFC </button> <button class="btn btn-success" id="simulateBtn"> <i class="fas fa-plus-square"></i> 模擬NFC數(shù)據(jù) </button> <button class="btn btn-secondary" id="clearBtn"> <i class="fas fa-trash-alt"></i> 清除日志 </button> </div> <h2 style="margin-top: 30px;"> <i class="fas fa-history card-icon"></i> 操作日志 </h2> <div id="logContainer"> <div> <span>[系統(tǒng)]</span> <span>NFC識別系統(tǒng)已啟動</span> </div> </div> </div> </div> <footer> <p>? 2023 NFC識別系統(tǒng) | 僅用于演示目的 | 需要設(shè)備支持Web NFC API</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { const statusDot = document.getElementById('statusDot'); const statusText = document.getElementById('statusText'); const scanBtn = document.getElementById('scanBtn'); const simulateBtn = document.getElementById('simulateBtn'); const clearBtn = document.getElementById('clearBtn'); const nfcContent = document.getElementById('nfcContent'); const logContainer = document.getElementById('logContainer'); let nfcSupported = false; // 檢查NFC支持 function checkNFCSupport() { if ('NDEFReader' in window) { nfcSupported = true; statusDot.classList.add('active'); statusText.textContent = 'NFC支持已檢測到'; addLog('NFC支持已檢測到', 'success'); } else { nfcSupported = false; statusText.textContent = '您的設(shè)備不支持Web NFC功能'; addLog('錯誤: 您的設(shè)備不支持Web NFC功能', 'error'); scanBtn.disabled = true; scanBtn.style.opacity = '0.6'; } } // 添加日志 function addLog(message, type = 'info') { const now = new Date(); const timeString = `[${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}]`; const logEntry = document.createElement('div'); logEntry.className = 'log-entry'; logEntry.innerHTML = ` <span>${timeString}</span> <span class="log-message ${type}">${message}</span> `; logContainer.appendChild(logEntry); logContainer.scrollTop = logContainer.scrollHeight; } // 開始掃描NFC scanBtn.addEventListener('click', async function() { if (!nfcSupported) { addLog('錯誤: NFC不支持', 'error'); return; } addLog('開始掃描NFC標(biāo)簽...'); try { const ndef = new NDEFReader(); await ndef.scan(); addLog('掃描已開始，請將NFC標(biāo)簽靠近設(shè)備', 'success'); ndef.addEventListener('reading', ({ message, serialNumber }) => { addLog(`檢測到NFC標(biāo)簽: ${serialNumber}`, 'success'); // 更新UI const now = new Date(); const timeString = `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`; nfcContent.innerHTML = ` <div> <div>標(biāo)簽ID</div> <div>${serialNumber}</div> </div> <div> <div>標(biāo)簽類型</div> <div>NDEF</div> </div> <div> <div>數(shù)據(jù)內(nèi)容</div> <div>${message.records.length} 條記錄</div> </div> <div> <div>讀取時間</div> <div>${timeString}</div> </div> `; }); ndef.addEventListener('readingerror', () => { addLog('讀取NFC標(biāo)簽時發(fā)生錯誤', 'error'); }); } catch (error) { addLog(`錯誤: ${error.message}`, 'error'); } }); // 模擬NFC數(shù)據(jù) simulateBtn.addEventListener('click', function() { const nfcTypes = ['MIFARE Classic', 'NTAG213', 'NTAG215', 'NTAG216', 'FeliCa']; const nfcData = [ 'https://example.com/nfc', '{"type":"product","id":12345,"name":"NFC示例產(chǎn)品"}', 'BEGIN:VCARD\nVERSION:3.0\nN:張;三\nTEL:+8613500000000\nEND:VCARD', '溫度: 25.6°C, 濕度: 45%' ]; const randomType = nfcTypes[Math.floor(Math.random() * nfcTypes.length)]; const randomData = nfcData[Math.floor(Math.random() * nfcData.length)]; const randomId = Math.random().toString(36).substring(2, 10).toUpperCase(); const now = new Date(); const timeString = `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`; nfcContent.innerHTML = ` <div> <div>標(biāo)簽ID</div> <div>ID-${randomId}</div> </div> <div> <div>標(biāo)簽類型</div> <div>${randomType}</div> </div> <div> <div>數(shù)據(jù)內(nèi)容</div> <div>${randomData}</div> </div> <div> <div>讀取時間</div> <div>${timeString}</div> </div> `; addLog(`模擬NFC標(biāo)簽數(shù)據(jù): ID-${randomId}`, 'success'); }); // 清除日志 clearBtn.addEventListener('click', function() { logContainer.innerHTML = ''; addLog('日志已清除'); }); // 初始化 checkNFCSupport(); addLog('系統(tǒng)初始化完成'); // 添加脈沖動畫到掃描按鈕 scanBtn.classList.add('pulse'); }); </script> </body> </html>功能說明
使用限制
冀公網(wǎng)安備