/**
* 网易云音乐榜单 - 主应用脚本
* 功能:获取API数据、渲染榜单、处理错误、自动切换API接口
*/
// 全局变量
const apiUrls = [];
let currentApiIndex = 0;
let rankData = null;
// DOM元素
const loadingElement = document.getElementById('loading');
const errorElement = document.getElementById('error-message');
const rankListElement = document.getElementById('rank-list');
const updateTimeElement = document.getElementById('update-time');
const retryButton = document.getElementById('retry-button');
// 初始化函数
async function init() {
try {
// 获取API接口列表
await loadApiUrls();
// 获取榜单数据
await fetchRankData();
// 添加音符装饰
createMusicNotes();
} catch (error) {
console.error('初始化失败:', error);
showError();
}
}
// 加载API接口列表
async function loadApiUrls() {
try {
const response = await fetch('./接口集合.json');
if (!response.ok) {
throw new Error('无法加载API接口列表');
}
const data = await response.json();
if (Array.isArray(data) && data.length > 0) {
apiUrls.push(...data);
console.log('已加载API接口列表:', apiUrls);
} else {
throw new Error('API接口列表为空');
}
} catch (error) {
console.error('加载API接口列表失败:', error);
// 使用默认API
apiUrls.push('https://60s.api.shumengya.top/v2/ncm-rank');
}
}
// 获取榜单数据
async function fetchRankData() {
showLoading();
// 如果没有API接口,显示错误
if (apiUrls.length === 0) {
throw new Error('没有可用的API接口');
}
try {
const apiUrl = apiUrls[currentApiIndex];
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`API请求失败: ${response.status}`);
}
const data = await response.json();
if (data.code === 200 && data.data && Array.isArray(data.data)) {
rankData = data;
renderRankList(data.data);
updateLastUpdateTime(data);
hideLoading();
} else {
throw new Error('API返回数据格式错误');
}
} catch (error) {
console.error('获取榜单数据失败:', error);
// 尝试切换到下一个API
if (tryNextApi()) {
return fetchRankData();
} else {
showError();
}
}
}
// 尝试切换到下一个API
function tryNextApi() {
if (currentApiIndex < apiUrls.length - 1) {
currentApiIndex++;
console.log(`切换到下一个API: ${apiUrls[currentApiIndex]}`);
return true;
}
return false;
}
// 渲染榜单列表
function renderRankList(ranks) {
if (!Array.isArray(ranks) || ranks.length === 0) {
showError('没有榜单数据');
return;
}
rankListElement.innerHTML = '';
ranks.forEach(rank => {
const rankItem = document.createElement('div');
rankItem.className = 'rank-item';
// 构建榜单项HTML
rankItem.innerHTML = `
${rank.update_frequency || '定期更新'}
${rank.name}
${rank.description || '暂无描述'}
更新: ${formatDate(rank.updated)}
查看详情
`;
rankListElement.appendChild(rankItem);
});
rankListElement.style.display = 'grid';
}
// 更新最后更新时间
function updateLastUpdateTime(data) {
if (data && data.data && data.data.length > 0) {
const latestRank = data.data.reduce((latest, current) => {
const latestDate = latest.updated_at || 0;
const currentDate = current.updated_at || 0;
return currentDate > latestDate ? current : latest;
}, data.data[0]);
if (latestRank && latestRank.updated) {
updateTimeElement.textContent = `最近更新: ${formatDate(latestRank.updated)}`;
} else {
updateTimeElement.textContent = '数据已更新';
}
}
}
// 格式化日期
function formatDate(dateStr) {
if (!dateStr) return '未知';
try {
const date = new Date(dateStr.replace('2025-', '2024-'));
if (isNaN(date.getTime())) return dateStr;
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
}).replace(/\//g, '-');
} catch (e) {
return dateStr;
}
}
// 创建音符装饰
function createMusicNotes() {
const notesContainer = document.getElementById('music-notes-container');
const notes = ['♪', '♫', '♬', '♩', '♭', '♮'];
const containerWidth = window.innerWidth;
const containerHeight = window.innerHeight;
// 清空容器
notesContainer.innerHTML = '';
// 创建15个音符
for (let i = 0; i < 15; i++) {
const note = document.createElement('div');
note.className = 'music-note';
note.textContent = notes[Math.floor(Math.random() * notes.length)];
// 随机位置
const left = Math.random() * containerWidth;
const top = Math.random() * containerHeight;
// 随机动画延迟
const delay = Math.random() * 20;
const duration = 15 + Math.random() * 15;
// 设置样式
note.style.left = `${left}px`;
note.style.top = `${top}px`;
note.style.animationDelay = `${delay}s`;
note.style.animationDuration = `${duration}s`;
notesContainer.appendChild(note);
}
}
// 显示加载中
function showLoading() {
loadingElement.style.display = 'block';
errorElement.style.display = 'none';
rankListElement.style.display = 'none';
}
// 隐藏加载中
function hideLoading() {
loadingElement.style.display = 'none';
}
// 显示错误信息
function showError(message = '加载失败,请稍后再试') {
loadingElement.style.display = 'none';
errorElement.querySelector('p').textContent = message;
errorElement.style.display = 'block';
}
// 重试按钮点击事件
retryButton.addEventListener('click', () => {
// 重置API索引
currentApiIndex = 0;
// 重新获取数据
fetchRankData();
});
// 窗口大小改变时重新创建音符
window.addEventListener('resize', debounce(createMusicNotes, 300));
// 防抖函数
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);