Base64 编码 - 小睿 AI 工具�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .tool-name { font-size: 24px; font-weight: bold; color: #333; } .back-link { color: #667eea; text-decoration: none; } .mode-tabs { display: flex; gap: 10px; margin-bottom: 20px; } .mode-tab { flex: 1; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; text-align: center; cursor: pointer; font-weight: 500; } .mode-tab.active { border-color: #667eea; background: #667eea; color: #fff; } .textarea-group { margin-bottom: 20px; } .textarea-group label { display: block; margin-bottom: 8px; font-weight: 500; } textarea { width: 100%; min-height: 150px; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 14px; font-family: 'Courier New', monospace; resize: vertical; } textarea:focus { outline: none; border-color: #667eea; } .btn-group { display: flex; gap: 10px; flex-wrap: wrap; } .btn { flex: 1; padding: 15px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; min-width: 120px; } .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .btn-secondary { background: #f0f0f0; color: #333; } .result-box { margin-top: 30px; } .result-box label { display: block; margin-bottom: 8px; font-weight: 500; } .copy-btn { background: #52c41a; color: #fff; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; float: right; } .stats { display: flex; gap: 20px; margin-top: 15px; color: #666; font-size: 14px; } </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Base64 编码", "description": "Base64 编码解码工具", "url": "https://xrdj.club/tool.php?id=34", "applicationCategory": "UtilitiesApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" }, "author": { "@type": "Organization", "name": "小睿 AI 工具箱", "url": "https://xrdj.club" } } </script> </head> <body> <div class="container"> <div class="header"> <div class="tool-name">🔐 Base64 编码</div> <a href="/" class="back-link">�?返回首页</a> </div> <div class="mode-tabs"> <div class="mode-tab active" onclick="setMode('encode')" id="encodeTab">🔒 编码 (Encode)</div> <div class="mode-tab" onclick="setMode('decode')" id="decodeTab">🔓 解码 (Decode)</div> </div> <div class="textarea-group"> <label id="inputLabel">输入要编码的文本</label> <textarea id="inputText" placeholder="在此输入文本..."></textarea> </div> <div class="btn-group"> <button class="btn btn-primary" onclick="process()" id="processBtn">🚀 开始编�?/button> <button class="btn btn-secondary" onclick="clearAll()">🗑�?清空</button> <button class="btn btn-secondary" onclick="swapText()">🔄 交换</button> </div> <div class="result-box"> <label> 结果 <button class="copy-btn" onclick="copyResult()">📋 复制</button> </label> <textarea id="outputText" readonly placeholder="结果将显示在这里..."></textarea> <div class="stats"> <span>输入长度�?strong id="inputLength">0</strong></span> <span>输出长度�?strong id="outputLength">0</strong></span> </div> </div> </div> <script> let currentMode = 'encode'; function setMode(mode) { currentMode = mode; document.getElementById('encodeTab').classList.toggle('active', mode === 'encode'); document.getElementById('decodeTab').classList.toggle('active', mode === 'decode'); document.getElementById('inputLabel').textContent = mode === 'encode' ? '输入要编码的文本' : '输入要解码的 Base64'; document.getElementById('processBtn').textContent = mode === 'encode' ? '🚀 开始编�? : '🚀 开始解�?; } function process() { const input = document.getElementById('inputText').value; if (!input.trim()) { alert('请输入内�?); return; } try { let result; if (currentMode === 'encode') { result = btoa(unescape(encodeURIComponent(input))); } else { result = decodeURIComponent(escape(atob(input))); } document.getElementById('outputText').value = result; document.getElementById('outputLength').textContent = result.length; } catch (e) { alert('处理失败�? + e.message); } document.getElementById('inputLength').textContent = input.length; } function copyResult() { const output = document.getElementById('outputText'); if (output.value) { output.select(); document.execCommand('copy'); alert('已复制到剪贴板！'); } } function clearAll() { document.getElementById('inputText').value = ''; document.getElementById('outputText').value = ''; document.getElementById('inputLength').textContent = '0'; document.getElementById('outputLength').textContent = '0'; } function swapText() { const input = document.getElementById('inputText'); const output = document.getElementById('outputText'); const temp = input.value; input.value = output.value; output.value = temp; } </script> </body> </html>