diff --git a/frontend/60sapi/娱乐消遣/随机JavaScript趣味题/接口集合.json b/frontend/60sapi/娱乐消遣/随机JavaScript趣味题/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/娱乐消遣/随机JavaScript趣味题/接口集合.json +++ b/frontend/60sapi/娱乐消遣/随机JavaScript趣味题/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/娱乐消遣/随机KFC文案/接口集合.json b/frontend/60sapi/娱乐消遣/随机KFC文案/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/娱乐消遣/随机KFC文案/接口集合.json +++ b/frontend/60sapi/娱乐消遣/随机KFC文案/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/娱乐消遣/随机一言/接口集合.json b/frontend/60sapi/娱乐消遣/随机一言/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/娱乐消遣/随机一言/接口集合.json +++ b/frontend/60sapi/娱乐消遣/随机一言/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/娱乐消遣/随机唱歌音频/接口集合.json b/frontend/60sapi/娱乐消遣/随机唱歌音频/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/娱乐消遣/随机唱歌音频/接口集合.json +++ b/frontend/60sapi/娱乐消遣/随机唱歌音频/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json b/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json +++ b/frontend/60sapi/实用功能/EpicGames免费游戏/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/实用功能/农历信息/接口集合.json b/frontend/60sapi/实用功能/农历信息/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/实用功能/农历信息/接口集合.json +++ b/frontend/60sapi/实用功能/农历信息/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/实用功能/实时天气/接口集合.json b/frontend/60sapi/实用功能/实时天气/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/实用功能/实时天气/接口集合.json +++ b/frontend/60sapi/实用功能/实时天气/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/实用功能/生成二维码/接口集合.json b/frontend/60sapi/实用功能/生成二维码/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/实用功能/生成二维码/接口集合.json +++ b/frontend/60sapi/实用功能/生成二维码/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/实用功能/百度百科词条/接口集合.json b/frontend/60sapi/实用功能/百度百科词条/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/实用功能/百度百科词条/接口集合.json +++ b/frontend/60sapi/实用功能/百度百科词条/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/日更资讯/历史上的今天/接口集合.json b/frontend/60sapi/日更资讯/历史上的今天/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/日更资讯/历史上的今天/接口集合.json +++ b/frontend/60sapi/日更资讯/历史上的今天/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/日更资讯/每天60s读懂世界/接口集合.json b/frontend/60sapi/日更资讯/每天60s读懂世界/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/日更资讯/每天60s读懂世界/接口集合.json +++ b/frontend/60sapi/日更资讯/每天60s读懂世界/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/日更资讯/每日国际汇率/接口集合.json b/frontend/60sapi/日更资讯/每日国际汇率/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/日更资讯/每日国际汇率/接口集合.json +++ b/frontend/60sapi/日更资讯/每日国际汇率/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/css/background.css b/frontend/60sapi/热搜榜单/Hacker News 榜单/css/background.css similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/css/background.css rename to frontend/60sapi/热搜榜单/Hacker News 榜单/css/background.css diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/css/style.css b/frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/css/style.css rename to frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/index.html b/frontend/60sapi/热搜榜单/Hacker News 榜单/index.html similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/index.html rename to frontend/60sapi/热搜榜单/Hacker News 榜单/index.html diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/js/script.js b/frontend/60sapi/热搜榜单/Hacker News 榜单/js/script.js similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/js/script.js rename to frontend/60sapi/热搜榜单/Hacker News 榜单/js/script.js diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/接口集合.json b/frontend/60sapi/热搜榜单/Hacker News 榜单/接口集合.json similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/接口集合.json rename to frontend/60sapi/热搜榜单/Hacker News 榜单/接口集合.json diff --git a/frontend/60sapi/热搜榜单/HackerNews榜单/返回接口.json b/frontend/60sapi/热搜榜单/Hacker News 榜单/返回接口.json similarity index 100% rename from frontend/60sapi/热搜榜单/HackerNews榜单/返回接口.json rename to frontend/60sapi/热搜榜单/Hacker News 榜单/返回接口.json diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css new file mode 100644 index 00000000..a7d0b453 --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css @@ -0,0 +1,107 @@ +.background-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; +} + +.green-gradient { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.3) 0%, + rgba(129, 199, 132, 0.2) 25%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.2) 75%, + rgba(76, 175, 80, 0.3) 100% + ); + animation: green-flow 20s ease-in-out infinite; +} + +.green-gradient::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at 30% 70%, + rgba(139, 195, 74, 0.4) 0%, + transparent 50% + ), radial-gradient( + circle at 70% 30%, + rgba(102, 187, 106, 0.3) 0%, + transparent 50% + ); + animation: green-pulse 15s ease-in-out infinite alternate; +} + +@keyframes green-flow { + 0%, 100% { + transform: rotate(0deg) scale(1); + opacity: 0.8; + } + 25% { + transform: rotate(90deg) scale(1.1); + opacity: 0.6; + } + 50% { + transform: rotate(180deg) scale(0.9); + opacity: 0.9; + } + 75% { + transform: rotate(270deg) scale(1.05); + opacity: 0.7; + } +} + +@keyframes green-pulse { + 0% { + transform: scale(1) rotate(0deg); + opacity: 0.5; + } + 50% { + transform: scale(1.2) rotate(180deg); + opacity: 0.8; + } + 100% { + transform: scale(1) rotate(360deg); + opacity: 0.6; + } +} + +/* 手机端背景优化 */ +@media (max-width: 768px) { + .green-gradient { + animation-duration: 25s; + } + + .green-gradient::before { + animation-duration: 18s; + } +} + +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .green-gradient, + .green-gradient::before { + animation: none; + } + + .green-gradient { + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.2) 0%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.15) 100% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css new file mode 100644 index 00000000..a9a4f728 --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css @@ -0,0 +1,248 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f0f8f0; + position: relative; + min-height: 100vh; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + position: relative; + z-index: 1; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 128, 0, 0.1); +} + +header { + text-align: center; + margin-bottom: 25px; + padding-bottom: 20px; + border-bottom: 2px solid #e8f5e8; +} + +header h1 { + color: #2d8f47; + margin-bottom: 12px; + font-size: 2.2rem; + font-weight: 600; + text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); +} + +.update-time { + color: #6b8e6b; + font-size: 0.95rem; + background-color: #f0f8f0; + padding: 8px 16px; + border-radius: 20px; + display: inline-block; +} + +.hot-list { + list-style: none; +} + +.hot-item { + padding: 18px; + margin-bottom: 12px; + border-radius: 10px; + background-color: white; + box-shadow: 0 3px 8px rgba(0, 128, 0, 0.08); + transition: all 0.3s ease; + display: flex; + align-items: center; + border-left: 4px solid transparent; +} + +.hot-item:hover { + transform: translateY(-3px); + box-shadow: 0 6px 16px rgba(0, 128, 0, 0.15); + border-left-color: #4caf50; +} + +.hot-rank { + font-size: 1.3rem; + font-weight: bold; + color: #4caf50; + margin-right: 18px; + min-width: 35px; + text-align: center; + background-color: #f0f8f0; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; +} + +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff6b6b, #ff8e8e); + color: white; +} + +.hot-rank.top-2 { + background: linear-gradient(135deg, #ffa726, #ffb74d); + color: white; +} + +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffca28, #ffd54f); + color: white; +} + +.hot-content { + flex: 1; +} + +.hot-title { + font-size: 1.15rem; + margin-bottom: 6px; + color: #2c3e2c; + text-decoration: none; + display: block; + line-height: 1.4; + font-weight: 500; +} + +.hot-title:hover { + color: #2d8f47; + text-decoration: underline; +} + +.loading { + text-align: center; + padding: 40px; + color: #6b8e6b; + font-size: 1.1rem; +} + +footer { + text-align: center; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #e8f5e8; + color: #6b8e6b; + font-size: 0.9rem; +} + +/* 平板端适配 (768px - 1024px) */ +@media (max-width: 1024px) and (min-width: 768px) { + .container { + max-width: 90%; + padding: 18px; + } + + header h1 { + font-size: 2rem; + } + + .hot-item { + padding: 16px; + } + + .hot-title { + font-size: 1.1rem; + } +} + +/* 手机端适配 (最大768px) */ +@media (max-width: 768px) { + body { + background-color: #f8fdf8; + } + + .container { + max-width: 95%; + margin: 10px auto; + padding: 15px; + border-radius: 8px; + } + + header { + margin-bottom: 20px; + padding-bottom: 15px; + } + + header h1 { + font-size: 1.8rem; + margin-bottom: 10px; + } + + .update-time { + font-size: 0.85rem; + padding: 6px 12px; + } + + .hot-item { + padding: 14px; + margin-bottom: 10px; + border-radius: 8px; + flex-direction: row; + align-items: flex-start; + } + + .hot-rank { + font-size: 1.1rem; + margin-right: 12px; + min-width: 30px; + width: 30px; + height: 30px; + margin-top: 2px; + } + + .hot-title { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 4px; + } + + footer { + margin-top: 20px; + padding-top: 15px; + font-size: 0.8rem; + } +} + +/* 小屏手机适配 (最大480px) */ +@media (max-width: 480px) { + .container { + margin: 5px auto; + padding: 12px; + } + + header h1 { + font-size: 1.6rem; + } + + .hot-item { + padding: 12px; + margin-bottom: 8px; + } + + .hot-rank { + font-size: 1rem; + margin-right: 10px; + min-width: 28px; + width: 28px; + height: 28px; + } + + .hot-title { + font-size: 0.95rem; + } + + .update-time { + font-size: 0.8rem; + padding: 5px 10px; + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html new file mode 100644 index 00000000..1a4c9686 --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html @@ -0,0 +1,34 @@ + + + + + + 哔哩哔哩热搜榜 + + + + +
+
+
+ +
+
+

哔哩哔哩热搜榜

+
+
+ +
+
+
加载中...
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js new file mode 100644 index 00000000..79764009 --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js @@ -0,0 +1,134 @@ +// API接口列表 +const API_ENDPOINTS = [ + "https://60s.viki.moe/v2/bili", + "https://60s-cf.viki.moe/v2/bili", + "https://60s.b23.run/v2/bili", + "https://60s.114128.xyz/v2/bili", + "https://60s-cf.114128.xyz/v2/bili" +]; + +// 当前使用的API索引 +let currentApiIndex = 0; + +// DOM元素 +const hotListElement = document.getElementById('hotList'); +const updateTimeElement = document.getElementById('updateTime'); + +// 格式化时间 +function formatDate(date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +// 渲染热搜列表 +function renderHotList(data) { + hotListElement.innerHTML = ''; + + data.forEach((item, index) => { + const hotItem = document.createElement('div'); + hotItem.className = 'hot-item'; + + const rankClass = index < 3 ? `top-${index + 1}` : ''; + + hotItem.innerHTML = ` +
${index + 1}
+
+ ${item.title} +
+ `; + + hotListElement.appendChild(hotItem); + }); + + // 更新时间 + updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`; +} + +// 显示加载状态 +function showLoading() { + hotListElement.innerHTML = '
加载中...
'; +} + +// 显示错误状态 +function showError(message) { + hotListElement.innerHTML = `
${message}
`; +} + +// 获取哔哩哔哩热搜数据 +async function fetchBiliHotList() { + showLoading(); + + try { + const response = await fetch(API_ENDPOINTS[currentApiIndex]); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const result = await response.json(); + + if (result.code === 200 && result.data && Array.isArray(result.data)) { + if (result.data.length > 0) { + renderHotList(result.data); + } else { + showError('暂无热搜数据'); + } + } else { + throw new Error('数据格式错误或无数据'); + } + } catch (error) { + console.error('获取数据失败:', error); + + // 尝试切换到下一个API + const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length; + + if (nextApiIndex !== 0) { + // 还有其他API可以尝试 + currentApiIndex = nextApiIndex; + showError('获取数据失败，正在尝试其他接口...'); + + // 延迟后重试 + setTimeout(fetchBiliHotList, 2000); + } else { + // 所有API都尝试过了 + currentApiIndex = 0; + showError('所有接口都无法访问，请稍后再试'); + } + } +} + +// 手动刷新数据 +function refreshData() { + currentApiIndex = 0; // 重置API索引 + fetchBiliHotList(); +} + +// 页面加载完成后获取数据 +document.addEventListener('DOMContentLoaded', () => { + fetchBiliHotList(); + + // 每隔5分钟刷新一次数据 + setInterval(fetchBiliHotList, 5 * 60 * 1000); + + // 添加键盘快捷键支持（按R键刷新） + document.addEventListener('keydown', (event) => { + if (event.key === 'r' || event.key === 'R') { + event.preventDefault(); + refreshData(); + } + }); +}); + +// 页面可见性变化时的处理 +document.addEventListener('visibilitychange', () => { + if (!document.hidden) { + // 页面重新可见时刷新数据 + refreshData(); + } +}); \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json new file mode 100644 index 00000000..084d6336 --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json @@ -0,0 +1,3 @@ +[ + "https://60s.api.shumengya.top" +] diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json new file mode 100644 index 00000000..e377277d --- /dev/null +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json @@ -0,0 +1,18 @@ +{ + "code": 200, + "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841", + "data": [ + { + "title": "18次阅兵76年逆袭路", + "link": "https://search.bilibili.com/all?keyword=18%E6%AC%A1%E9%98%85%E5%85%B576%E5%B9%B4%E9%80%86%E8%A2%AD%E8%B7%AF" + }, + { + "title": "80年前的今天日本签署投降书", + "link": "https://search.bilibili.com/all?keyword=80%E5%B9%B4%E5%89%8D%E7%9A%84%E4%BB%8A%E5%A4%A9%E6%97%A5%E6%9C%AC%E7%AD%BE%E7%BD%B2%E6%8A%95%E9%99%8D%E4%B9%A6" + }, + { + "title": "九三阅兵具体安排公布", + "link": "https://search.bilibili.com/all?keyword=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E5%85%B7%E4%BD%93%E5%AE%89%E6%8E%92%E5%85%AC%E5%B8%83" + } + ] +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css b/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css new file mode 100644 index 00000000..a7d0b453 --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css @@ -0,0 +1,107 @@ +.background-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; +} + +.green-gradient { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.3) 0%, + rgba(129, 199, 132, 0.2) 25%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.2) 75%, + rgba(76, 175, 80, 0.3) 100% + ); + animation: green-flow 20s ease-in-out infinite; +} + +.green-gradient::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at 30% 70%, + rgba(139, 195, 74, 0.4) 0%, + transparent 50% + ), radial-gradient( + circle at 70% 30%, + rgba(102, 187, 106, 0.3) 0%, + transparent 50% + ); + animation: green-pulse 15s ease-in-out infinite alternate; +} + +@keyframes green-flow { + 0%, 100% { + transform: rotate(0deg) scale(1); + opacity: 0.8; + } + 25% { + transform: rotate(90deg) scale(1.1); + opacity: 0.6; + } + 50% { + transform: rotate(180deg) scale(0.9); + opacity: 0.9; + } + 75% { + transform: rotate(270deg) scale(1.05); + opacity: 0.7; + } +} + +@keyframes green-pulse { + 0% { + transform: scale(1) rotate(0deg); + opacity: 0.5; + } + 50% { + transform: scale(1.2) rotate(180deg); + opacity: 0.8; + } + 100% { + transform: scale(1) rotate(360deg); + opacity: 0.6; + } +} + +/* 手机端背景优化 */ +@media (max-width: 768px) { + .green-gradient { + animation-duration: 25s; + } + + .green-gradient::before { + animation-duration: 18s; + } +} + +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .green-gradient, + .green-gradient::before { + animation: none; + } + + .green-gradient { + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.2) 0%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.15) 100% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css b/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css new file mode 100644 index 00000000..39624d2f --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css @@ -0,0 +1,291 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f0f8f0; + position: relative; + min-height: 100vh; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + position: relative; + z-index: 1; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 128, 0, 0.1); +} + +header { + text-align: center; + margin-bottom: 25px; + padding-bottom: 20px; + border-bottom: 2px solid #e8f5e8; +} + +header h1 { + color: #2d8f47; + margin-bottom: 12px; + font-size: 2.2rem; + font-weight: 600; + text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); +} + +.update-time { + color: #6b8e6b; + font-size: 0.95rem; + background-color: #f0f8f0; + padding: 8px 16px; + border-radius: 20px; + display: inline-block; +} + +.hot-list { + list-style: none; +} + +.hot-item { + padding: 18px; + margin-bottom: 12px; + border-radius: 10px; + background-color: white; + box-shadow: 0 3px 8px rgba(0, 128, 0, 0.08); + transition: all 0.3s ease; + display: flex; + align-items: center; + border-left: 4px solid transparent; + position: relative; +} + +.hot-item:hover { + transform: translateY(-3px); + box-shadow: 0 6px 16px rgba(0, 128, 0, 0.15); + border-left-color: #4caf50; +} + +.hot-rank { + font-size: 1.3rem; + font-weight: bold; + color: #4caf50; + margin-right: 18px; + min-width: 35px; + text-align: center; + background-color: #f0f8f0; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff6b6b, #ff8e8e); + color: white; +} + +.hot-rank.top-2 { + background: linear-gradient(135deg, #ffa726, #ffb74d); + color: white; +} + +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffca28, #ffd54f); + color: white; +} + +.hot-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.hot-title { + font-size: 1.15rem; + margin-bottom: 6px; + color: #2c3e2c; + text-decoration: none; + display: block; + line-height: 1.4; + font-weight: 500; +} + +.hot-title:hover { + color: #2d8f47; + text-decoration: underline; +} + +.hot-stats { + display: flex; + align-items: center; + gap: 15px; + font-size: 0.85rem; + color: #888; + margin-top: 5px; +} + +.stat-item { + display: flex; + align-items: center; + gap: 4px; +} + +.hot-value { + background: linear-gradient(135deg, #4caf50, #66bb6a); + color: white; + padding: 4px 8px; + border-radius: 12px; + font-weight: 500; + font-size: 0.8rem; +} + +.hot-tag { + background-color: #e8f5e8; + color: #2d8f47; + padding: 2px 6px; + border-radius: 8px; + font-size: 0.75rem; + font-weight: 500; +} + +.loading { + text-align: center; + padding: 40px; + color: #6b8e6b; + font-size: 1.1rem; +} + +footer { + text-align: center; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #e8f5e8; + color: #6b8e6b; + font-size: 0.9rem; +} + +/* 平板端适配 (768px - 1024px) */ +@media (max-width: 1024px) and (min-width: 768px) { + .container { + max-width: 90%; + padding: 18px; + } + + header h1 { + font-size: 2rem; + } + + .hot-item { + padding: 16px; + } + + .hot-title { + font-size: 1.1rem; + } +} + +/* 手机端适配 (最大768px) */ +@media (max-width: 768px) { + body { + background-color: #f8fdf8; + } + + .container { + max-width: 95%; + margin: 10px auto; + padding: 15px; + border-radius: 8px; + } + + header { + margin-bottom: 20px; + padding-bottom: 15px; + } + + header h1 { + font-size: 1.8rem; + margin-bottom: 10px; + } + + .update-time { + font-size: 0.85rem; + padding: 6px 12px; + } + + .hot-item { + padding: 14px; + margin-bottom: 10px; + border-radius: 8px; + flex-direction: row; + align-items: flex-start; + } + + .hot-rank { + font-size: 1.1rem; + margin-right: 12px; + min-width: 30px; + width: 30px; + height: 30px; + margin-top: 2px; + } + + .hot-title { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 4px; + } + + .hot-stats { + flex-wrap: wrap; + gap: 10px; + font-size: 0.8rem; + } + + footer { + margin-top: 20px; + padding-top: 15px; + font-size: 0.8rem; + } +} + +/* 小屏手机适配 (最大480px) */ +@media (max-width: 480px) { + .container { + margin: 5px auto; + padding: 12px; + } + + header h1 { + font-size: 1.6rem; + } + + .hot-item { + padding: 12px; + margin-bottom: 8px; + } + + .hot-rank { + font-size: 1rem; + margin-right: 10px; + min-width: 28px; + width: 28px; + height: 28px; + } + + .hot-title { + font-size: 0.95rem; + } + + .update-time { + font-size: 0.8rem; + padding: 5px 10px; + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/index.html b/frontend/60sapi/热搜榜单/头条热搜榜/index.html new file mode 100644 index 00000000..0c77ee74 --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/index.html @@ -0,0 +1,34 @@ + + + + + + 头条热搜榜 + + + + +
+
+
+ +
+
+

头条热搜榜

+
+
+ +
+
+
加载中...
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js b/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js new file mode 100644 index 00000000..cf7f0f6b --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js @@ -0,0 +1,156 @@ +// API接口列表 +const API_ENDPOINTS = [ + "https://60s.viki.moe/v2/toutiao", + "https://60s-cf.viki.moe/v2/toutiao", + "https://60s.b23.run/v2/toutiao", + "https://60s.114128.xyz/v2/toutiao", + "https://60s-cf.114128.xyz/v2/toutiao" +]; + +// 当前使用的API索引 +let currentApiIndex = 0; + +// DOM元素 +const hotListElement = document.getElementById('hotList'); +const updateTimeElement = document.getElementById('updateTime'); + +// 格式化时间 +function formatDate(date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +// 格式化数字 +function formatNumber(num) { + if (num >= 10000) { + return (num / 10000).toFixed(1) + '万'; + } + return num.toString(); +} + +// 渲染热搜列表 +function renderHotList(data) { + hotListElement.innerHTML = ''; + + data.forEach((item, index) => { + const hotItem = document.createElement('div'); + hotItem.className = 'hot-item'; + + const rankClass = index < 3 ? `top-${index + 1}` : ''; + + // 处理热度值显示 + const hotValueDisplay = item.hot_value ? + `
${formatNumber(item.hot_value)} 热度
` : ''; + + // 处理标签显示 + const tagDisplay = item.tag ? + `
${item.tag}
` : ''; + + hotItem.innerHTML = ` +
${index + 1}
+
+ ${item.title} +
+ ${hotValueDisplay} + ${tagDisplay} + ${item.source ? `
📰 ${item.source}
` : ''} + ${item.time ? `
🕒 ${item.time}
` : ''} +
+
+ `; + + hotListElement.appendChild(hotItem); + }); + + // 更新时间 + updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`; +} + +// 显示加载状态 +function showLoading() { + hotListElement.innerHTML = '
加载中...
'; +} + +// 显示错误状态 +function showError(message) { + hotListElement.innerHTML = `
${message}
`; +} + +// 获取头条热搜数据 +async function fetchToutiaoHotList() { + showLoading(); + + try { + const response = await fetch(API_ENDPOINTS[currentApiIndex]); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const result = await response.json(); + + if (result.code === 200 && result.data && Array.isArray(result.data)) { + if (result.data.length > 0) { + renderHotList(result.data); + } else { + showError('暂无热搜数据'); + } + } else { + throw new Error('数据格式错误或无数据'); + } + } catch (error) { + console.error('获取数据失败:', error); + + // 尝试切换到下一个API + const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length; + + if (nextApiIndex !== 0) { + // 还有其他API可以尝试 + currentApiIndex = nextApiIndex; + showError('获取数据失败，正在尝试其他接口...'); + + // 延迟后重试 + setTimeout(fetchToutiaoHotList, 2000); + } else { + // 所有API都尝试过了 + currentApiIndex = 0; + showError('所有接口都无法访问，请稍后再试'); + } + } +} + +// 手动刷新数据 +function refreshData() { + currentApiIndex = 0; // 重置API索引 + fetchToutiaoHotList(); +} + +// 页面加载完成后获取数据 +document.addEventListener('DOMContentLoaded', () => { + fetchToutiaoHotList(); + + // 每隔5分钟刷新一次数据 + setInterval(fetchToutiaoHotList, 5 * 60 * 1000); + + // 添加键盘快捷键支持（按R键刷新） + document.addEventListener('keydown', (event) => { + if (event.key === 'r' || event.key === 'R') { + event.preventDefault(); + refreshData(); + } + }); +}); + +// 页面可见性变化时的处理 +document.addEventListener('visibilitychange', () => { + if (!document.hidden) { + // 页面重新可见时刷新数据 + refreshData(); + } +}); \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/接口集合.json b/frontend/60sapi/热搜榜单/头条热搜榜/接口集合.json new file mode 100644 index 00000000..547b2771 --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/接口集合.json @@ -0,0 +1,3 @@ +[ + "https://60s.api.shumengya.top" +] diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/返回接口.json b/frontend/60sapi/热搜榜单/头条热搜榜/返回接口.json new file mode 100644 index 00000000..778e5e45 --- /dev/null +++ b/frontend/60sapi/热搜榜单/头条热搜榜/返回接口.json @@ -0,0 +1,30 @@ +{ + "code": 200, + "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841", + "data": [ + { + "title": "九三阅兵具体安排公布", + "hot_value": 11821633, + "tag": "热", + "source": "头条新闻", + "time": "2小时前", + "link": "https://www.toutiao.com/article/7404567890123456789/" + }, + { + "title": "九月第一天", + "hot_value": 11327170, + "tag": "新", + "source": "今日头条", + "time": "1小时前", + "link": "https://www.toutiao.com/article/7404567890123456790/" + }, + { + "title": "遇见上合共享津彩", + "hot_value": 11222444, + "tag": "推荐", + "source": "头条资讯", + "time": "3小时前", + "link": "https://www.toutiao.com/article/7404567890123456791/" + } + ] +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/微博热搜榜/接口集合.json b/frontend/60sapi/热搜榜单/微博热搜榜/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/热搜榜单/微博热搜榜/接口集合.json +++ b/frontend/60sapi/热搜榜单/微博热搜榜/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/热搜榜单/抖音热搜榜/接口集合.json b/frontend/60sapi/热搜榜单/抖音热搜榜/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/热搜榜单/抖音热搜榜/接口集合.json +++ b/frontend/60sapi/热搜榜单/抖音热搜榜/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json b/frontend/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json +++ b/frontend/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css b/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css new file mode 100644 index 00000000..a7d0b453 --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css @@ -0,0 +1,107 @@ +.background-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; +} + +.green-gradient { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.3) 0%, + rgba(129, 199, 132, 0.2) 25%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.2) 75%, + rgba(76, 175, 80, 0.3) 100% + ); + animation: green-flow 20s ease-in-out infinite; +} + +.green-gradient::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at 30% 70%, + rgba(139, 195, 74, 0.4) 0%, + transparent 50% + ), radial-gradient( + circle at 70% 30%, + rgba(102, 187, 106, 0.3) 0%, + transparent 50% + ); + animation: green-pulse 15s ease-in-out infinite alternate; +} + +@keyframes green-flow { + 0%, 100% { + transform: rotate(0deg) scale(1); + opacity: 0.8; + } + 25% { + transform: rotate(90deg) scale(1.1); + opacity: 0.6; + } + 50% { + transform: rotate(180deg) scale(0.9); + opacity: 0.9; + } + 75% { + transform: rotate(270deg) scale(1.05); + opacity: 0.7; + } +} + +@keyframes green-pulse { + 0% { + transform: scale(1) rotate(0deg); + opacity: 0.5; + } + 50% { + transform: scale(1.2) rotate(180deg); + opacity: 0.8; + } + 100% { + transform: scale(1) rotate(360deg); + opacity: 0.6; + } +} + +/* 手机端背景优化 */ +@media (max-width: 768px) { + .green-gradient { + animation-duration: 25s; + } + + .green-gradient::before { + animation-duration: 18s; + } +} + +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .green-gradient, + .green-gradient::before { + animation: none; + } + + .green-gradient { + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.2) 0%, + rgba(165, 214, 167, 0.1) 50%, + rgba(200, 230, 201, 0.15) 100% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css b/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css new file mode 100644 index 00000000..f53380d4 --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css @@ -0,0 +1,331 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f0f8f0; + position: relative; + min-height: 100vh; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 20px; + position: relative; + z-index: 1; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 128, 0, 0.1); +} + +header { + text-align: center; + margin-bottom: 25px; + padding-bottom: 20px; + border-bottom: 2px solid #e8f5e8; +} + +header h1 { + color: #2d8f47; + margin-bottom: 12px; + font-size: 2.2rem; + font-weight: 600; + text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); +} + +.update-time { + color: #6b8e6b; + font-size: 0.95rem; + background-color: #f0f8f0; + padding: 8px 16px; + border-radius: 20px; + display: inline-block; +} + +.topic-list { + list-style: none; +} + +.topic-item { + padding: 20px; + margin-bottom: 15px; + border-radius: 12px; + background-color: white; + box-shadow: 0 3px 10px rgba(0, 128, 0, 0.08); + transition: all 0.3s ease; + border-left: 4px solid transparent; + position: relative; +} + +.topic-item:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0, 128, 0, 0.15); + border-left-color: #4caf50; +} + +.topic-header { + display: flex; + align-items: flex-start; + margin-bottom: 12px; +} + +.topic-rank { + font-size: 1.3rem; + font-weight: bold; + color: #4caf50; + margin-right: 18px; + min-width: 35px; + text-align: center; + background-color: #f0f8f0; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.topic-rank.top-1 { + background: linear-gradient(135deg, #ff6b6b, #ff8e8e); + color: white; +} + +.topic-rank.top-2 { + background: linear-gradient(135deg, #ffa726, #ffb74d); + color: white; +} + +.topic-rank.top-3 { + background: linear-gradient(135deg, #ffca28, #ffd54f); + color: white; +} + +.topic-content { + flex: 1; +} + +.topic-title { + font-size: 1.2rem; + margin-bottom: 8px; + color: #2c3e2c; + text-decoration: none; + display: block; + line-height: 1.4; + font-weight: 600; +} + +.topic-title:hover { + color: #2d8f47; + text-decoration: underline; +} + +.topic-detail { + font-size: 0.95rem; + color: #666; + line-height: 1.5; + margin-bottom: 10px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.topic-stats { + display: flex; + align-items: center; + gap: 15px; + font-size: 0.85rem; + color: #888; + margin-top: 10px; +} + +.stat-item { + display: flex; + align-items: center; + gap: 4px; +} + +.hot-value { + background: linear-gradient(135deg, #4caf50, #66bb6a); + color: white; + padding: 4px 8px; + border-radius: 12px; + font-weight: 500; + font-size: 0.8rem; +} + +.topic-cover { + width: 80px; + height: 60px; + border-radius: 8px; + object-fit: cover; + margin-left: 15px; + flex-shrink: 0; +} + +.loading { + text-align: center; + padding: 40px; + color: #6b8e6b; + font-size: 1.1rem; +} + +footer { + text-align: center; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #e8f5e8; + color: #6b8e6b; + font-size: 0.9rem; +} + +/* 平板端适配 (768px - 1024px) */ +@media (max-width: 1024px) and (min-width: 768px) { + .container { + max-width: 90%; + padding: 18px; + } + + header h1 { + font-size: 2rem; + } + + .topic-item { + padding: 18px; + } + + .topic-title { + font-size: 1.15rem; + } + + .topic-cover { + width: 70px; + height: 50px; + } +} + +/* 手机端适配 (最大768px) */ +@media (max-width: 768px) { + body { + background-color: #f8fdf8; + } + + .container { + max-width: 95%; + margin: 10px auto; + padding: 15px; + border-radius: 8px; + } + + header { + margin-bottom: 20px; + padding-bottom: 15px; + } + + header h1 { + font-size: 1.8rem; + margin-bottom: 10px; + } + + .update-time { + font-size: 0.85rem; + padding: 6px 12px; + } + + .topic-item { + padding: 16px; + margin-bottom: 12px; + border-radius: 8px; + } + + .topic-header { + flex-direction: column; + align-items: stretch; + } + + .topic-rank { + font-size: 1.1rem; + margin-right: 0; + margin-bottom: 10px; + width: 30px; + height: 30px; + align-self: flex-start; + } + + .topic-title { + font-size: 1.05rem; + line-height: 1.5; + margin-bottom: 6px; + } + + .topic-detail { + font-size: 0.9rem; + margin-bottom: 8px; + } + + .topic-stats { + flex-wrap: wrap; + gap: 10px; + font-size: 0.8rem; + } + + .topic-cover { + width: 60px; + height: 45px; + margin-left: 10px; + } + + footer { + margin-top: 20px; + padding-top: 15px; + font-size: 0.8rem; + } +} + +/* 小屏手机适配 (最大480px) */ +@media (max-width: 480px) { + .container { + margin: 5px auto; + padding: 12px; + } + + header h1 { + font-size: 1.6rem; + } + + .topic-item { + padding: 14px; + margin-bottom: 10px; + } + + .topic-rank { + font-size: 1rem; + width: 28px; + height: 28px; + } + + .topic-title { + font-size: 1rem; + } + + .topic-detail { + font-size: 0.85rem; + } + + .topic-cover { + width: 50px; + height: 38px; + margin-left: 8px; + } + + .update-time { + font-size: 0.8rem; + padding: 5px 10px; + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/index.html b/frontend/60sapi/热搜榜单/知乎热门话题/index.html new file mode 100644 index 00000000..82c7302d --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/index.html @@ -0,0 +1,34 @@ + + + + + + 知乎热门话题 + + + + +
+
+
+ +
+
+

知乎热门话题

+
+
+ +
+
+
加载中...
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js b/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js new file mode 100644 index 00000000..8b0558f8 --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js @@ -0,0 +1,155 @@ +// API接口列表 +const API_ENDPOINTS = [ + "https://60s.viki.moe/v2/zhihu", + "https://60s-cf.viki.moe/v2/zhihu", + "https://60s.b23.run/v2/zhihu", + "https://60s.114128.xyz/v2/zhihu", + "https://60s-cf.114128.xyz/v2/zhihu" +]; + +// 当前使用的API索引 +let currentApiIndex = 0; + +// DOM元素 +const topicListElement = document.getElementById('topicList'); +const updateTimeElement = document.getElementById('updateTime'); + +// 格式化时间 +function formatDate(date) { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + const seconds = String(date.getSeconds()).padStart(2, '0'); + + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +// 格式化数字 +function formatNumber(num) { + if (num >= 10000) { + return (num / 10000).toFixed(1) + '万'; + } + return num.toString(); +} + +// 渲染话题列表 +function renderTopicList(data) { + topicListElement.innerHTML = ''; + + data.forEach((item, index) => { + const topicItem = document.createElement('div'); + topicItem.className = 'topic-item'; + + const rankClass = index < 3 ? `top-${index + 1}` : ''; + + // 处理封面图片 + const coverImg = item.cover ? + `话题封面` : ''; + + topicItem.innerHTML = ` +
+
${index + 1}
+
+ ${item.title} + ${item.detail ? `
${item.detail}
` : ''} +
+ ${item.hot_value_desc ? `
${item.hot_value_desc}
` : ''} + ${item.answer_cnt ? `
💬 ${formatNumber(item.answer_cnt)} 回答
` : ''} + ${item.follower_cnt ? `
👥 ${formatNumber(item.follower_cnt)} 关注
` : ''} +
+
+ ${coverImg} +
+ `; + + topicListElement.appendChild(topicItem); + }); + + // 更新时间 + updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`; +} + +// 显示加载状态 +function showLoading() { + topicListElement.innerHTML = '
加载中...
'; +} + +// 显示错误状态 +function showError(message) { + topicListElement.innerHTML = `
${message}
`; +} + +// 获取知乎热门话题数据 +async function fetchZhihuTopics() { + showLoading(); + + try { + const response = await fetch(API_ENDPOINTS[currentApiIndex]); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const result = await response.json(); + + if (result.code === 200 && result.data && Array.isArray(result.data)) { + if (result.data.length > 0) { + renderTopicList(result.data); + } else { + showError('暂无热门话题数据'); + } + } else { + throw new Error('数据格式错误或无数据'); + } + } catch (error) { + console.error('获取数据失败:', error); + + // 尝试切换到下一个API + const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length; + + if (nextApiIndex !== 0) { + // 还有其他API可以尝试 + currentApiIndex = nextApiIndex; + showError('获取数据失败，正在尝试其他接口...'); + + // 延迟后重试 + setTimeout(fetchZhihuTopics, 2000); + } else { + // 所有API都尝试过了 + currentApiIndex = 0; + showError('所有接口都无法访问，请稍后再试'); + } + } +} + +// 手动刷新数据 +function refreshData() { + currentApiIndex = 0; // 重置API索引 + fetchZhihuTopics(); +} + +// 页面加载完成后获取数据 +document.addEventListener('DOMContentLoaded', () => { + fetchZhihuTopics(); + + // 每隔5分钟刷新一次数据 + setInterval(fetchZhihuTopics, 5 * 60 * 1000); + + // 添加键盘快捷键支持（按R键刷新） + document.addEventListener('keydown', (event) => { + if (event.key === 'r' || event.key === 'R') { + event.preventDefault(); + refreshData(); + } + }); +}); + +// 页面可见性变化时的处理 +document.addEventListener('visibilitychange', () => { + if (!document.hidden) { + // 页面重新可见时刷新数据 + refreshData(); + } +}); \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json b/frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json new file mode 100644 index 00000000..04e92b7f --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json @@ -0,0 +1,7 @@ +[ + "https://60s-cf.viki.moe", + "https://60s.viki.moe", + "https://60s.b23.run", + "https://60s.114128.xyz", + "https://60s-cf.114128.xyz" +] diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/返回接口.json b/frontend/60sapi/热搜榜单/知乎热门话题/返回接口.json new file mode 100644 index 00000000..a9acef11 --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/返回接口.json @@ -0,0 +1,30 @@ +{ + "code": 200, + "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841", + "data": [ + { + "title": "你是什么时候意识到抗日战争很艰难的？", + "detail": "就不像抗日神剧", + "cover": "https://picx.zhimg.com/v2-a07a53b2e23887c7a2440cc3f1984122.png", + "hot_value_desc": "1311 万热度", + "answer_cnt": 739, + "follower_cnt": 1739, + "comment_cnt": 0, + "created_at": 1622774952000, + "created": "2021/06/04 10:49:12", + "link": "https://api.zhihu.com/questions/463076881" + }, + { + "title": "为什么中国在很多领域都要求自主研发？", + "detail": "中国在很多领域都要求自主研发，似乎确认很多东西都有个中国版本，真有这个必要吗？", + "cover": "https://pic3.zhimg.com/80/v2-bb4dfa56f138980078da003df436e661_hd.png", + "hot_value_desc": "816 万热度", + "answer_cnt": 2476, + "follower_cnt": 12545, + "comment_cnt": 0, + "created_at": 1352205751000, + "created": "2012/11/06 20:42:31", + "link": "https://api.zhihu.com/questions/20579464" + } + ] +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json b/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json +++ b/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ] diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json b/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json index 04e92b7f..547b2771 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json @@ -1,7 +1,3 @@ [ - "https://60s-cf.viki.moe", - "https://60s.viki.moe", - "https://60s.b23.run", - "https://60s.114128.xyz", - "https://60s-cf.114128.xyz" + "https://60s.api.shumengya.top" ]