显示任何结构的数组对象数据【向上自动滚动】

显示任何结构的数组对象数据

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图编辑软件 - 数据展示</title><style>@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');body {font-family: 'Share Tech Mono', monospace;margin: 0;padding: 0;background-color: #121212;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23333" stroke-width="1" opacity="0.3"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23aaa" stroke-width="0.5" opacity="0.2"/><path d="M10,10 Q50,30 90,10 Q70,50 90,90 Q50,70 10,90 Q30,50 10,10 Z" stroke="%23ccc" stroke-width="1" fill="none" opacity="0.3"/><path d="M20,20 Q60,40 80,20 Q70,60 80,80 Q40,60 20,80 Q30,40 20,20 Z" stroke="%23ddd" stroke-width="0.8" fill="none" opacity="0.2"/></svg>'),linear-gradient(to bottom, rgba(18,18,18,0.9), rgba(40,40,40,0.7));color: #e0e0e0;line-height: 1.8;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;position: relative;}h1 {color: #e0e0e0;text-align: center;font-size: 3.5rem;margin: 30px 0;text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 20px rgba(0,150,255,0.5);border-bottom: 3px solid #555;padding-bottom: 20px;letter-spacing: 4px;font-weight: 800;line-height: 1.3;background: linear-gradient(to right, transparent, rgba(100,100,100,0.2), transparent);font-family: 'Orbitron', sans-serif;position: relative;border-image: linear-gradient(to right, #333, #666, #333) 1;}h1::before, h1::after {content: "⚙";position: absolute;top: 50%;transform: translateY(-50%);color: #aaa;font-size: 2.5rem;text-shadow: 0 0 15px rgba(0,150,255,0.7);opacity: 0.8;}h1::before {left: 10%;}h1::after {right: 10%;}h2 {color: #aaa;font-size: 2.4rem;margin: 20px 0;border-left: 5px solid #555;padding-left: 15px;text-shadow: 0 0 8px rgba(0,150,255,0.5);letter-spacing: 1px;font-weight: 700;line-height: 1.4;font-family: 'Orbitron', sans-serif;border-image: linear-gradient(to bottom, #333, #666, #333) 1;}#data-container {max-width: 1200px;margin: 0 auto;padding: 30px;background-color: rgba(30, 30, 30, 0.85);box-shadow: 0 0 25px rgba(0,150,255,0.3), inset 0 0 30px rgba(100,100,100,0.3);border: 2px solid #555;border-radius: 5px;position: relative;overflow-y: auto;height: 80vh;border-image: linear-gradient(to right, #333, #666, #333) 1;scrollbar-width: thin;scrollbar-color: #555 #333;}#data-container::-webkit-scrollbar {width: 10px;height: 10px;}#data-container::-webkit-scrollbar-track {background: rgba(30, 30, 30, 0.5);border-radius: 5px;}#data-container::-webkit-scrollbar-thumb {background-color: #555;border-radius: 5px;border: 1px solid rgba(0,150,255,0.3);}#data-container::-webkit-scrollbar-thumb:hover {background-color: #666;box-shadow: inset 0 0 5px rgba(0,150,255,0.5);}#data-container::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10,10 C30,5 70,5 90,10 C95,30 95,70 90,90 C70,95 30,95 10,90 C5,70 5,30 10,10 Z" stroke="%23aaa" stroke-width="0.5" fill="none" opacity="0.2"/><path d="M20,20 C40,15 60,15 80,20 C85,40 85,60 80,80 C60,85 40,85 20,80 C15,60 15,40 20,20 Z" stroke="%23ccc" stroke-width="0.8" fill="none" opacity="0.3"/><path d="M30,30 C50,25 70,25 70,30 C75,50 75,70 70,70 C50,75 30,75 30,70 C25,50 25,30 30,30 Z" stroke="%23ddd" stroke-width="0.6" fill="none" opacity="0.2"/><path d="M40,40 C60,35 80,35 80,40 C85,60 85,80 80,80 C60,85 40,85 40,80 C35,60 35,40 40,40 Z" stroke="%23eee" stroke-width="0.4" fill="none" opacity="0.1"/></svg>');pointer-events: none;}table {border-collapse: separate;width: 100%;margin: 20px 0;border: none;border-spacing: 0;background: rgba(40, 40, 40, 0.7);}th, td {border: none;border-bottom: 1px solid rgba(100,100,100,0.3);padding: 12px;text-align: left;font-size: 1.1rem;line-height: 1.8;letter-spacing: 0.3px;text-shadow: 0 0 5px rgba(0,150,255,0.3);position: relative;}/* td:first-child {width: 10%;min-width: 20px;} */th::after, td::after {content: '';position: absolute;bottom: -1px;left: 0;right: 0;height: 1px;background: linear-gradient(to right, transparent, rgba(0,150,255,0.5), transparent);}th {background: linear-gradient(to right, #333, #555, #333);color: #fff;font-weight: bold;text-shadow: 0 0 10px rgba(0,150,255,0.5);}tr:nth-child(even) {background-color: rgba(60, 60, 60, 0.1);}tr:hover {background-color: rgba(80, 80, 80, 0.3);box-shadow: inset 0 0 10px rgba(0,150,255,0.2);}</style>
</head>
<body><h1>王朝数据展示</h1><div id="data-container"></div><script>fetch('data.json').then(response => response.json()).then(data => {const container = document.getElementById('data-container');container.innerHTML = createTable(data);// 自动滚动功能let scrollInterval;function startAutoScroll() {let scrollStep = 2;scrollInterval = setInterval(() => {container.scrollTop += scrollStep;if(container.scrollTop >= container.scrollHeight - container.clientHeight) {container.scrollTop = 0;}}, 20);}startAutoScroll();// 添加鼠标悬停暂停功能container.addEventListener('mouseenter', () => {clearInterval(scrollInterval);});container.addEventListener('mouseleave', () => {startAutoScroll();});}).catch(error => {console.error('加载数据出错:', error);document.getElementById('data-container').innerHTML = '<p>加载数据出错，请检查控制台</p>';});function createTable(data) {let html = '';for (const category in data[0]) {html += `<h2>${category}</h2>`;html += createSubTable(data[0][category]);}return html;}function createSubTable(obj) {if (typeof obj !== 'object' || obj === null) {return `<p>${obj}</p>`;}let html = '<table>';for (const key in obj) {html += '<tr>';html += `<td><strong>${key}</strong></td>`;html += `<td>${formatValue(obj[key])}</td>`;html += '</tr>';}html += '</table>';return html;}function formatValue(value) {if (Array.isArray(value)) {if (value.length > 0 && typeof value[0] === 'object') {return value.map(obj => createSubTable(obj)).join('<br>');}return value.join(', ');} else if (typeof value === 'object' && value !== null) {return createSubTable(value);}return value;}</script>
</body>
</html>

数据data.json

[{"王朝":[{"朝代": "夏","建立时间": "约公元前2070年","结束时间": "约公元前1600年","开国皇帝": "禹","都城": "阳城（今河南登封）"},{"朝代": "商","建立时间": "约公元前1600年","结束时间": "约公元前1046年","开国皇帝": "汤","都城": "殷（今河南安阳）"},{"朝代": "西周","建立时间": "约公元前1046年","结束时间": "约公元前771年","开国皇帝": "周武王姬发","都城": "镐京（今陕西西安）"},{"朝代": "东周","建立时间": "约公元前770年","结束时间": "公元前256年","开国皇帝": "周平王姬宜臼","都城": "洛邑（今河南洛阳）"},{"朝代": "秦","建立时间": "公元前221年","结束时间": "公元前207年","开国皇帝": "嬴政","都城": "咸阳（今陕西咸阳）","备注": "中国首个大一统王朝，推行郡县制与书同文"},{"朝代": "西汉","建立时间": "公元前202年","结束时间": "公元8年","开国皇帝": "刘邦","都城": "长安（今陕西西安）"},{"朝代": "东汉","建立时间": "公元25年","结束时间": "公元220年","开国皇帝": "刘秀","都城": "洛阳（今河南洛阳）"},{"朝代": "唐","建立时间": "公元618年","结束时间": "公元907年","开国皇帝": "李渊","都城": "长安（今陕西西安）","备注": "鼎盛时疆域达1200万平方公里，长安为国际文化中心"},{"朝代": "元","建立时间": "公元1271年","结束时间": "公元1368年","开国皇帝": "忽必烈","都城": "大都（今北京）","备注": "疆域最大王朝（1400-2000万平方公里），首次将西藏纳入版图"},{"朝代": "明","建立时间": "公元1368年","结束时间": "公元1644年","开国皇帝": "朱元璋","都城": "南京→北京","备注": "鼎盛疆域约997万平方公里，设奴儿干都司管辖黑龙江流域"},{"朝代": "清","建立时间": "公元1636年","结束时间": "公元1912年","开国皇帝": "皇太极","都城": "北京","备注": "奠定近代中国版图（1316万平方公里），19世纪丧失400万平方公里领土"}]
}
]