一个包含文本区域和按钮的页面，点击按钮可以将 JSON 数据转换为字符串并填充到文本区域中。
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#64748B',
accent: '#0EA5E9',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-custom {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
</style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 min-h-screen font-inter text-dark">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- 页面标题 -->
<header class="mb-10 text-center">
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-2 text-shadow">JSON数据展示工具</h1>
<p class="text-secondary text-lg max-w-2xl mx-auto">将JSON数据格式化后展示在文本区域中，支持一键复制和清空功能</p>
</header>
<!-- 主要内容区域 -->
<main class="bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
<!-- 控制面板 -->
<div class="bg-primary/10 p-4 flex flex-wrap gap-3 justify-between items-center border-b border-primary/20">
<div class="flex flex-wrap gap-3">
<button id="fillButton" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg shadow-md flex items-center gap-2 transition-custom">
<i class="fa-solid fa-database"></i>
<span>填充示例数据</span>
</button>
<button id="clearButton" class="bg-secondary hover:bg-secondary/90 text-white px-5 py-2 rounded-lg shadow-md flex items-center gap-2 transition-custom">
<i class="fa-solid fa-eraser"></i>
<span>清空</span>
</button>
</div>
<div class="flex items-center gap-2">
<span class="text-secondary">缩进空格数:</span>
<select id="indentSelect" class="bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-custom">
<option value="2">2个空格</option>
<option value="4" selected>4个空格</option>
<option value="6">6个空格</option>
<option value="8">8个空格</option>
</select>
</div>
</div>
<!-- 文本区域容器 -->
<div class="p-4">
<div class="relative mb-4">
<label for="presentCode" class="block text-sm font-medium text-secondary mb-1">JSON数据</label>
<button id="copyButton" class="absolute top-2 right-2 bg-dark/80 hover:bg-dark text-white px-3 py-1 rounded-md text-sm shadow-sm flex items-center gap-1 transition-custom opacity-0 group-hover:opacity-100">
<i class="fa-solid fa-copy"></i>
<span>复制</span>
</button>
</div>
<textarea id="presentCode" class="w-full h-[400px] p-4 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none font-mono text-sm transition-custom" placeholder="JSON数据将显示在这里..."></textarea>
</div>
<!-- 状态栏 -->
<div class="bg-gray-50 p-3 border-t border-gray-200 flex justify-between items-center">
<div id="statusMessage" class="text-sm text-secondary">就绪</div>
<div class="text-sm text-secondary">
<span id="charCount">0</span> 字符
</div>
</div>
</main>
<!-- 功能说明 -->
<section class="mt-10 bg-white/70 backdrop-blur-sm rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold text-dark mb-4 flex items-center gap-2">
<i class="fa-solid fa-info-circle text-primary"></i>
使用说明
</h2>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start gap-2">
<i class="fa-solid fa-check-circle text-primary mt-1"></i>
<span>点击"填充示例数据"按钮，将自动生成并显示JSON数据</span>
</li>
<li class="flex items-start gap-2">
<i class="fa-solid fa-check-circle text-primary mt-1"></i>
<span>通过下拉菜单可以选择不同的缩进空格数，使JSON数据更易读</span>
</li>
<li class="flex items-start gap-2">
<i class="fa-solid fa-check-circle text-primary mt-1"></i>
<span>将鼠标悬停在文本区域右上角时，可以看到"复制"按钮，点击可复制全部内容</span>
</li>
<li class="flex items-start gap-2">
<i class="fa-solid fa-check-circle text-primary mt-1"></i>
<span>点击"清空"按钮可以清除文本区域中的所有内容</span>
</li>
</ul>
</section>
</div>
<!-- 页脚 -->
<footer class="mt-16 text-center text-secondary text-sm pb-6">
<p>© 2025 JSON数据展示工具 | 使用 Tailwind CSS 构建</p>
</footer>
<script>
// 示例JSON数据
const sampleJson = {
"用户信息": {
"姓名": "张三",
"年龄": 30,
"联系方式": {
"电话": ["13800138000", "13900139000"],
"邮箱": "zhangsan@example.com"
},
"地址": {
"省份": "北京市",
"城市": "北京市",
"街道": "朝阳区建国路88号",
"邮编": "100022"
}
},
"订单信息": [
{
"订单号": "ORD20250510001",
"商品": [
{
"名称": "智能手机",
"数量": 1,
"价格": 4999.00,
"规格": {
"颜色": "星空蓝",
"存储": "256GB"
}
},
{
"名称": "无线耳机",
"数量": 1,
"价格": 899.00,
"规格": {
"颜色": "白色"
}
}
],
"订单日期": "2025-05-10",
"状态": "已支付",
"支付方式": "微信支付"
},
{
"订单号": "ORD20250509002",
"商品": [
{
"名称": "笔记本电脑",
"数量": 1,
"价格": 8999.00,
"规格": {
"处理器": "Intel i7",
"内存": "16GB",
"存储": "512GB SSD"
}
}
],
"订单日期": "2025-05-09",
"状态": "已发货",
"支付方式": "支付宝"
}
],
"会员信息": {
"会员等级": "白金会员",
"积分": 12500,
"注册日期": "2024-01-15",
"上次登录": "2025-05-10T08:30:00"
}
};
// 获取DOM元素
const fillButton = document.getElementById('fillButton');
const clearButton = document.getElementById('clearButton');
const copyButton = document.getElementById('copyButton');
const presentCode = document.getElementById('presentCode');
const indentSelect = document.getElementById('indentSelect');
const statusMessage = document.getElementById('statusMessage');
const charCount = document.getElementById('charCount');
// 填充JSON数据到文本区域
function fillJsonData() {
const indent = parseInt(indentSelect.value);
presentCode.value = JSON.stringify(sampleJson, null, indent);
updateCharCount();
showStatus('已成功填充示例数据', 'success');
}
// 清空文本区域
function clearTextArea() {
presentCode.value = '';
updateCharCount();
showStatus('已清空文本区域', 'info');
}
// 复制文本区域内容
function copyToClipboard() {
presentCode.select();
document.execCommand('copy');
showStatus('已复制到剪贴板', 'success');
// 复制成功动画
copyButton.innerHTML = '<i class="fa-solid fa-check"></i><span>已复制</span>';
copyButton.classList.add('bg-green-600');
setTimeout(() => {
copyButton.innerHTML = '<i class="fa-solid fa-copy"></i><span>复制</span>';
copyButton.classList.remove('bg-green-600');
}, 2000);
}
// 更新字符计数
function updateCharCount() {
charCount.textContent = presentCode.value.length;
}
// 显示状态消息
function showStatus(message, type = 'info') {
statusMessage.textContent = message;
// 添加状态样式
statusMessage.className = 'text-sm';
if (type === 'success') {
statusMessage.classList.add('text-green-600');
} else if (type === 'error') {
statusMessage.classList.add('text-red-600');
} else {
statusMessage.classList.add('text-secondary');
}
// 3秒后恢复默认状态
setTimeout(() => {
statusMessage.textContent = '就绪';
statusMessage.className = 'text-sm text-secondary';
}, 3000);
}
// 事件监听器
fillButton.addEventListener('click', fillJsonData);
clearButton.addEventListener('click', clearTextArea);
copyButton.addEventListener('click', copyToClipboard);
indentSelect.addEventListener('change', () => {
if (presentCode.value.trim() !== '') {
fillJsonData();
}
});
presentCode.addEventListener('input', updateCharCount);
// 初始化
updateCharCount();
// 添加文本区域动画效果
presentCode.addEventListener('focus', () => {
presentCode.classList.add('ring-2', 'ring-primary/50');
});
presentCode.addEventListener('blur', () => {
presentCode.classList.remove('ring-2', 'ring-primary/50');
});
// 按钮悬停效果
const buttons = [fillButton, clearButton, copyButton];
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.classList.add('scale-105');
});
button.addEventListener('mouseleave', () => {
button.classList.remove('scale-105');
});
});
</script>
</body>
</html>
这个页面具有以下特点：
- 美观的界面设计，采用蓝色为主色调，搭配现代化的卡片式布局
- 响应式设计，在不同屏幕尺寸上都能良好显示
- 交互友好，按钮有悬停效果，状态变更有动画反馈
- 实用功能：填充示例数据、清空内容、复制内容、调整缩进空格数
- 实时字符计数和操作状态提示
你可以点击"填充示例数据"按钮来查看JSON数据展示效果。
需支付 5元 阅读剩余内容
