热搜榜单
热搜榜单
This commit is contained in:
yangyaoxiang666
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
107
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
107
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
@@ -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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
248
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
248
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
34
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html
Normal file
34
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>哔哩哔哩热搜榜</title>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<link rel="stylesheet" href="./css/background.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="background-container">
|
||||||
|
<div class="green-gradient"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>哔哩哔哩热搜榜</h1>
|
||||||
|
<div class="update-time" id="updateTime"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="hot-list" id="hotList">
|
||||||
|
<div class="loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>数据来源于哔哩哔哩热搜榜</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
134
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
134
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
@@ -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 = `
|
||||||
|
<div class="hot-rank ${rankClass}">${index + 1}</div>
|
||||||
|
<div class="hot-content">
|
||||||
|
<a href="${item.link}" class="hot-title" target="_blank">${item.title}</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
hotListElement.appendChild(hotItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新时间
|
||||||
|
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示加载状态
|
||||||
|
function showLoading() {
|
||||||
|
hotListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示错误状态
|
||||||
|
function showError(message) {
|
||||||
|
hotListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取哔哩哔哩热搜数据
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
3
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
3
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
[
|
||||||
|
"https://60s.api.shumengya.top"
|
||||||
|
]
|
||||||
18
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json
Normal file
18
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
107
frontend/60sapi/热搜榜单/头条热搜榜/css/background.css
Normal file
107
frontend/60sapi/热搜榜单/头条热搜榜/css/background.css
Normal file
@@ -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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
291
frontend/60sapi/热搜榜单/头条热搜榜/css/style.css
Normal file
291
frontend/60sapi/热搜榜单/头条热搜榜/css/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
34
frontend/60sapi/热搜榜单/头条热搜榜/index.html
Normal file
34
frontend/60sapi/热搜榜单/头条热搜榜/index.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>头条热搜榜</title>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<link rel="stylesheet" href="./css/background.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="background-container">
|
||||||
|
<div class="green-gradient"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>头条热搜榜</h1>
|
||||||
|
<div class="update-time" id="updateTime"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="hot-list" id="hotList">
|
||||||
|
<div class="loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>数据来源于头条热搜榜</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
156
frontend/60sapi/热搜榜单/头条热搜榜/js/main.js
Normal file
156
frontend/60sapi/热搜榜单/头条热搜榜/js/main.js
Normal file
@@ -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 ?
|
||||||
|
`<div class="stat-item"><span class="hot-value">${formatNumber(item.hot_value)} 热度</span></div>` : '';
|
||||||
|
|
||||||
|
// 处理标签显示
|
||||||
|
const tagDisplay = item.tag ?
|
||||||
|
`<div class="stat-item"><span class="hot-tag">${item.tag}</span></div>` : '';
|
||||||
|
|
||||||
|
hotItem.innerHTML = `
|
||||||
|
<div class="hot-rank ${rankClass}">${index + 1}</div>
|
||||||
|
<div class="hot-content">
|
||||||
|
<a href="${item.link}" class="hot-title" target="_blank">${item.title}</a>
|
||||||
|
<div class="hot-stats">
|
||||||
|
${hotValueDisplay}
|
||||||
|
${tagDisplay}
|
||||||
|
${item.source ? `<div class="stat-item">📰 ${item.source}</div>` : ''}
|
||||||
|
${item.time ? `<div class="stat-item">🕒 ${item.time}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
hotListElement.appendChild(hotItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新时间
|
||||||
|
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示加载状态
|
||||||
|
function showLoading() {
|
||||||
|
hotListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示错误状态
|
||||||
|
function showError(message) {
|
||||||
|
hotListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取头条热搜数据
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
3
frontend/60sapi/热搜榜单/头条热搜榜/接口集合.json
Normal file
3
frontend/60sapi/热搜榜单/头条热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
[
|
||||||
|
"https://60s.api.shumengya.top"
|
||||||
|
]
|
||||||
30
frontend/60sapi/热搜榜单/头条热搜榜/返回接口.json
Normal file
30
frontend/60sapi/热搜榜单/头条热搜榜/返回接口.json
Normal file
@@ -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/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
107
frontend/60sapi/热搜榜单/知乎热门话题/css/background.css
Normal file
107
frontend/60sapi/热搜榜单/知乎热门话题/css/background.css
Normal file
@@ -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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
331
frontend/60sapi/热搜榜单/知乎热门话题/css/style.css
Normal file
331
frontend/60sapi/热搜榜单/知乎热门话题/css/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
34
frontend/60sapi/热搜榜单/知乎热门话题/index.html
Normal file
34
frontend/60sapi/热搜榜单/知乎热门话题/index.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>知乎热门话题</title>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
<link rel="stylesheet" href="./css/background.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="background-container">
|
||||||
|
<div class="green-gradient"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>知乎热门话题</h1>
|
||||||
|
<div class="update-time" id="updateTime"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="topic-list" id="topicList">
|
||||||
|
<div class="loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>数据来源于知乎热门话题</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
155
frontend/60sapi/热搜榜单/知乎热门话题/js/main.js
Normal file
155
frontend/60sapi/热搜榜单/知乎热门话题/js/main.js
Normal file
@@ -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 ?
|
||||||
|
`<img src="${item.cover}" alt="话题封面" class="topic-cover" onerror="this.style.display='none'">` : '';
|
||||||
|
|
||||||
|
topicItem.innerHTML = `
|
||||||
|
<div class="topic-header">
|
||||||
|
<div class="topic-rank ${rankClass}">${index + 1}</div>
|
||||||
|
<div class="topic-content">
|
||||||
|
<a href="${item.link}" class="topic-title" target="_blank">${item.title}</a>
|
||||||
|
${item.detail ? `<div class="topic-detail">${item.detail}</div>` : ''}
|
||||||
|
<div class="topic-stats">
|
||||||
|
${item.hot_value_desc ? `<div class="stat-item"><span class="hot-value">${item.hot_value_desc}</span></div>` : ''}
|
||||||
|
${item.answer_cnt ? `<div class="stat-item">💬 ${formatNumber(item.answer_cnt)} 回答</div>` : ''}
|
||||||
|
${item.follower_cnt ? `<div class="stat-item">👥 ${formatNumber(item.follower_cnt)} 关注</div>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${coverImg}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
topicListElement.appendChild(topicItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新时间
|
||||||
|
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示加载状态
|
||||||
|
function showLoading() {
|
||||||
|
topicListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示错误状态
|
||||||
|
function showError(message) {
|
||||||
|
topicListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取知乎热门话题数据
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
7
frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json
Normal file
7
frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json
Normal file
@@ -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"
|
||||||
|
]
|
||||||
30
frontend/60sapi/热搜榜单/知乎热门话题/返回接口.json
Normal file
30
frontend/60sapi/热搜榜单/知乎热门话题/返回接口.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,7 +1,3 @@
|
|||||||
[
|
[
|
||||||
"https://60s-cf.viki.moe",
|
"https://60s.api.shumengya.top"
|
||||||
"https://60s.viki.moe",
|
|
||||||
"https://60s.b23.run",
|
|
||||||
"https://60s.114128.xyz",
|
|
||||||
"https://60s-cf.114128.xyz"
|
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user