顯示任何結構的數組對象數據【向上自動滾動】

顯示任何結構的數組對象數據

<!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萬平方公里領土"}]
}
]