想要飞的小乌龟2026-09-11 ai脚本
dsada

67 阅读
JavaScript
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSON格式化工具</title> </head> <body style="margin:0; padding:32px 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color:#f0f4f9; color:#1f2937; box-sizing:border-box;"> <div style="max-width:1200px; margin:0 auto;"> <div style="background:#ffffff; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.08); padding:24px;"> <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;"> <h1 style="font-size:26px; font-weight:600; margin:0;">JSON 格式化工具</h1> <button id="toggleDarkBtn" style="padding:8px 14px; border-radius:8px; border:1px solid #e5e7eb; background:transparent; color:#1f2937; cursor:pointer; font-size:14px;">🌓 切换深色模式</button> </div> <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px;"> <button id="btnFormat" style="padding:10px 18px; border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; background:#3b82f6;">格式化JSON</button> <button id="btnCompress" style="padding:10px 18px; border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; background:#6b7280;">压缩JSON</button> <button id="btnCopy" style="padding:10px 18px; border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; background:#8b5cf6;">复制输出</button> <button id="btnClear" style="padding:10px 18px; border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; background:#ef4444;">清空全部</button> </div> <div id="rowWrap" style="display:grid; grid-template-columns:1fr 1fr; gap:20px;"> <div style="display:flex; flex-direction:column; gap:10px;"> <label style="font-weight:500; color:#6b7280;">📥 输入JSON</label> <textarea id="inputJson" placeholder="粘贴你的JSON字符串到这里..." style="width:100%; min-height:440px; padding:14px; border:1px solid #e5e7eb; border-radius:10px; font-family:'Consolas','Monaco',monospace; font-size:13px; resize:vertical; background:#fff; color:#1f2937; outline:none;"></textarea> </div> <div style="display:flex; flex-direction:column; gap:10px;"> <label style="font-weight:500; color:#6b7280;">📤 输出结果</label> <textarea id="outputJson" readonly style="width:100%; min-height:440px; padding:14px; border:1px solid #e5e7eb; border-radius:10px; font-family:'Consolas','Monaco',monospace; font-size:13px; resize:vertical; background:#fff; color:#1f2937; outline:none;"></textarea> </div> </div> <div id="msgBox" style="margin-top:16px; padding:12px 16px; border-radius:10px; font-weight:500; display:none;"></div> </div> </div> <script> const $ = s => document.querySelector(s); const inputEl = $("#inputJson"); const outputEl = $("#outputJson"); const msgBox = $("#msgBox"); const body = document.body; const wrapRow = $("#rowWrap"); const cardWrap = body.querySelector('div > div'); const darkBtn = $("#toggleDarkBtn"); let isDark = false; // 监听窗口大小，JS实现移动端单列（替代媒体查询） function resizeHandler() { if(window.innerWidth <= 768) { wrapRow.style.gridTemplateColumns = "1fr"; } else { wrapRow.style.gridTemplateColumns = "1fr 1fr"; } } window.addEventListener('resize', resizeHandler); resizeHandler(); // 深色切换逻辑，动态修改行内样式 darkBtn.onclick = function(){ isDark = !isDark; if(isDark){ body.style.backgroundColor = "#111827"; body.style.color = "#f3f4f6"; cardWrap.style.backgroundColor = "#1f2937"; inputEl.style.backgroundColor = "#1f2937"; inputEl.style.color = "#f3f4f6"; inputEl.style.borderColor = "#374151"; outputEl.style.backgroundColor = "#1f2937"; outputEl.style.color = "#f3f4f6"; outputEl.style.borderColor = "#374151"; darkBtn.style.color = "#f3f4f6"; darkBtn.style.borderColor = "#374151"; }else{ body.style.backgroundColor = "#f0f4f9"; body.style.color = "#1f2937"; cardWrap.style.backgroundColor = "#ffffff"; inputEl.style.backgroundColor = "#ffffff"; inputEl.style.color = "#1f2937"; inputEl.style.borderColor = "#e5e7eb"; outputEl.style.backgroundColor = "#ffffff"; outputEl.style.color = "#1f2937"; outputEl.style.borderColor = "#e5e7eb"; darkBtn.style.color = "#1f2937"; darkBtn.style.borderColor = "#e5e7eb"; } } function showMsg(text, isOk=true){ msgBox.textContent = text; msgBox.style.display = "block"; if(isOk){ msgBox.style.backgroundColor = "rgba(16, 185, 129, 0.12)"; msgBox.style.color = "#10b981"; msgBox.style.border = "1px solid rgba(16, 185, 129, 0.2)"; }else{ msgBox.style.backgroundColor = "rgba(239, 68, 68, 0.12)"; msgBox.style.color = "#ef4444"; msgBox.style.border = "1px solid rgba(239, 68, 68, 0.2)"; } } $("#btnFormat").onclick = function(){ try{ const jsonStr = inputEl.value.trim(); if(!jsonStr){ showMsg("请输入JSON内容", false); return; } const obj = JSON.parse(jsonStr); outputEl.value = JSON.stringify(obj, null, 2); showMsg("✅ JSON格式化成功"); }catch(e){ showMsg("❌ JSON解析失败：" + e.message, false); } } $("#btnCompress").onclick = function(){ try{ const jsonStr = inputEl.value.trim(); if(!jsonStr){ showMsg("请输入JSON内容", false); return; } const obj = JSON.parse(jsonStr); outputEl.value = JSON.stringify(obj); showMsg("✅ JSON压缩完成"); }catch(e){ showMsg("❌ JSON解析失败：" + e.message, false); } } $("#btnCopy").onclick = async function(){ if(!outputEl.value){ showMsg("暂无内容可复制", false); return; } await navigator.clipboard.writeText(outputEl.value); showMsg("✅ 已复制到剪贴板"); } $("#btnClear").onclick = function(){ inputEl.value = ""; outputEl.value = ""; msgBox.style.display = "none"; } </script> </body> </html>
运行输出