NFC识别功能实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NFC识别系统</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识别系统</h1> <p>近场通信标签识别与数据读取</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数据</h2> <div id="nfcContent"> <div> <div>标签ID</div> <div>等待读取...</div> </div> <div> <div>标签类型</div> <div>-</div> </div> <div> <div>数据内容</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数据 </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>[系统]</span> <span>NFC识别系统已启动</span> </div> </div> </div> </div> <footer> <p>© 2023 NFC识别系统 | 仅用于演示目的 | 需要设备支持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 = '您的设备不支持Web NFC功能'; addLog('错误: 您的设备不支持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标签...'); try { const ndef = new NDEFReader(); await ndef.scan(); addLog('扫描已开始，请将NFC标签靠近设备', 'success'); ndef.addEventListener('reading', ({ message, serialNumber }) => { addLog(`检测到NFC标签: ${serialNumber}`, 'success'); // 更新UI const now = new Date(); const timeString = `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`; nfcContent.innerHTML = ` <div> <div>标签ID</div> <div>${serialNumber}</div> </div> <div> <div>标签类型</div> <div>NDEF</div> </div> <div> <div>数据内容</div> <div>${message.records.length} 条记录</div> </div> <div> <div>读取时间</div> <div>${timeString}</div> </div> `; }); ndef.addEventListener('readingerror', () => { addLog('读取NFC标签时发生错误', 'error'); }); } catch (error) { addLog(`错误: ${error.message}`, 'error'); } }); // 模拟NFC数据 simulateBtn.addEventListener('click', function() { const nfcTypes = ['MIFARE Classic', 'NTAG213', 'NTAG215', 'NTAG216', 'FeliCa']; const nfcData = [ 'https://example.com/nfc', '{"type":"product","id":12345,"name":"NFC示例产品"}', '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>标签ID</div> <div>ID-${randomId}</div> </div> <div> <div>标签类型</div> <div>${randomType}</div> </div> <div> <div>数据内容</div> <div>${randomData}</div> </div> <div> <div>读取时间</div> <div>${timeString}</div> </div> `; addLog(`模拟NFC标签数据: ID-${randomId}`, 'success'); }); // 清除日志 clearBtn.addEventListener('click', function() { logContainer.innerHTML = ''; addLog('日志已清除'); }); // 初始化 checkNFCSupport(); addLog('系统初始化完成'); // 添加脉冲动画到扫描按钮 scanBtn.classList.add('pulse'); }); </script> </body> </html>
冀公网安备