优化结果
This commit is contained in:
203
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
203
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
@@ -0,0 +1,203 @@
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
/* 太阳元素 */
|
||||
.sun {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 35%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle, #ffeb3b 30%, #ff9800 70%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
||||
z-index: 0;
|
||||
animation: sun-pulse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 蓝色云元素 */
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: rgba(135, 206, 250, 0.8);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cloud-1 {
|
||||
top: 120px;
|
||||
left: -150px;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
animation: cloud-float 15s linear infinite;
|
||||
}
|
||||
|
||||
.cloud-2 {
|
||||
top: 180px;
|
||||
right: -150px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
animation: cloud-float 20s linear infinite reverse;
|
||||
}
|
||||
|
||||
.cloud-3 {
|
||||
top: 60px;
|
||||
left: -100px;
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
animation: cloud-float 12s linear infinite;
|
||||
}
|
||||
|
||||
/* 云朵的伪元素，创建更自然的形状 */
|
||||
.cloud::before,
|
||||
.cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(135, 206, 250, 0.8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cloud::before {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.cloud::after {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: -30px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@keyframes sun-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 60px rgba(255, 152, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cloud-float {
|
||||
0% {
|
||||
transform: translateX(-150px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(100vw + 150px));
|
||||
}
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(24, 144, 255, 0.6) 0%,
|
||||
rgba(64, 169, 255, 0.5) 20%,
|
||||
rgba(135, 208, 255, 0.4) 40%,
|
||||
rgba(255, 175, 64, 0.4) 60%,
|
||||
rgba(255, 122, 69, 0.5) 80%,
|
||||
rgba(245, 85, 65, 0.6) 100%
|
||||
);
|
||||
animation: gradient-flow 25s ease-in-out infinite;
|
||||
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
||||
filter: blur(30px);
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 25% 65%,
|
||||
rgba(24, 144, 255, 0.6) 0%,
|
||||
transparent 60%
|
||||
), radial-gradient(
|
||||
circle at 75% 35%,
|
||||
rgba(245, 85, 65, 0.5) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
animation: pulse-effect 18s ease-in-out infinite alternate;
|
||||
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
@keyframes gradient-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 pulse-effect {
|
||||
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) {
|
||||
.modern-gradient {
|
||||
animation-duration: 25s;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
animation-duration: 18s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
352
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
352
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
@@ -0,0 +1,352 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-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 pulse-effect {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f0f7ff;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 28px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #1890ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 16px;
|
||||
font-size: 2.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 22px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background-color: white;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
34
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html
Normal file
34
InfoGenie-frontend/public/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="modern-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>
|
||||
130
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
130
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
@@ -0,0 +1,130 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/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
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
18
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json
Normal file
18
InfoGenie-frontend/public/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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user