把大致框架搭好1
This commit is contained in:
495
frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
Normal file
495
frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
Normal file
@@ -0,0 +1,495 @@
|
||||
/* 猫眼票房排行榜 - 淡绿色清新风格样式 */
|
||||
|
||||
/* 重置样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
|
||||
min-height: 100vh;
|
||||
color: #2d5016;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 8px 25px rgba(45, 80, 22, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #2d5016;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #5a7c65;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #e8f5e8;
|
||||
border-top: 4px solid #81c784;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 票房排行榜容器 */
|
||||
.ranking-container {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 8px 25px rgba(45, 80, 22, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 排行榜标题 */
|
||||
.ranking-title {
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #2d5016;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* 票房排行榜列表 */
|
||||
.movie-list {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* 电影项目 */
|
||||
.movie-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 15px rgba(45, 80, 22, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 5px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.movie-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(45, 80, 22, 0.12);
|
||||
}
|
||||
|
||||
/* 前三名特殊样式 */
|
||||
.movie-item.top-1 {
|
||||
border-left-color: #ffd700;
|
||||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
.movie-item.top-2 {
|
||||
border-left-color: #c0c0c0;
|
||||
background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
.movie-item.top-3 {
|
||||
border-left-color: #cd7f32;
|
||||
background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
/* 排名徽章 */
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.rank-badge.gold {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4a);
|
||||
}
|
||||
|
||||
.rank-badge.silver {
|
||||
background: linear-gradient(135deg, #c0c0c0, #e2e8f0);
|
||||
}
|
||||
|
||||
.rank-badge.bronze {
|
||||
background: linear-gradient(135deg, #cd7f32, #d69e2e);
|
||||
}
|
||||
|
||||
.rank-badge.regular {
|
||||
background: linear-gradient(135deg, #81c784, #66bb6a);
|
||||
}
|
||||
|
||||
/* 电影信息布局 */
|
||||
.movie-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #2d5016;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.movie-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #2d5016;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.movie-year {
|
||||
color: #5a7c65;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.box-office {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.box-office-amount {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #1b5e20;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.box-office-desc {
|
||||
color: #5a7c65;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.stats-container {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(129, 199, 132, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #2d5016;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #5a7c65;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 更新时间 */
|
||||
.update-time {
|
||||
text-align: center;
|
||||
color: #5a7c65;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08);
|
||||
}
|
||||
|
||||
.error h3 {
|
||||
color: #d32f2f;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.error p {
|
||||
color: #5a7c65;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 (768px - 1024px) */
|
||||
@media screen and (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.ranking-container {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.movie-info {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.8rem;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.box-office-amount {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端适配 (最大767px) - 优先优化 */
|
||||
@media screen and (max-width: 767px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.8rem;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ranking-container {
|
||||
padding: 20px 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ranking-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.movie-info {
|
||||
grid-template-columns: 50px 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.5rem;
|
||||
min-width: 40px;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.movie-details {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.box-office {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.movie-year {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.box-office-amount {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.box-office-desc {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
padding: 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏手机适配 (最大480px) */
|
||||
@media screen and (max-width: 480px) {
|
||||
.container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.ranking-container {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.box-office-amount {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.3rem;
|
||||
min-width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率显示器优化 */
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.movie-list {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.box-office-amount {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
40
frontend/60sapi/热搜榜单/猫眼票房排行榜/index.html
Normal file
40
frontend/60sapi/热搜榜单/猫眼票房排行榜/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="猫眼票房排行榜 - 展示全球电影总票房排行榜">
|
||||
<meta name="keywords" content="猫眼, 票房, 排行榜, 电影票房, 全球票房">
|
||||
<title>猫眼票房排行榜 | 全球电影总票房</title>
|
||||
|
||||
<!-- 引入CSS样式 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- 网站图标（SVG内联为data URL，避免外部依赖） -->
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<header class="header">
|
||||
<h1>
|
||||
<span>🎬</span>
|
||||
猫眼票房排行榜（时更）
|
||||
</h1>
|
||||
<p>展示全球电影总票房排行榜，数据来自权威源头，稳定实时</p>
|
||||
</header>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div id="loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>正在加载票房数据...</p>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<main id="ranking-content" class="content" style="display: none;"></main>
|
||||
</div>
|
||||
|
||||
<!-- 引入JavaScript -->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
249
frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
Normal file
249
frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
Normal file
@@ -0,0 +1,249 @@
|
||||
// 猫眼票房排行榜 - JavaScript 实现
|
||||
|
||||
const API = {
|
||||
endpoints: [],
|
||||
currentIndex: 0,
|
||||
params: {
|
||||
encoding: 'json'
|
||||
},
|
||||
localFallback: '返回接口.json',
|
||||
// 初始化API接口列表
|
||||
async init() {
|
||||
try {
|
||||
const res = await fetch('./接口集合.json');
|
||||
const endpoints = await res.json();
|
||||
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/maoyan`);
|
||||
} catch (e) {
|
||||
// 如果无法加载接口集合，使用默认接口
|
||||
this.endpoints = ['https://60s.viki.moe/v2/maoyan'];
|
||||
}
|
||||
},
|
||||
// 获取当前接口URL
|
||||
getCurrentUrl() {
|
||||
if (this.endpoints.length === 0) return null;
|
||||
const url = new URL(this.endpoints[this.currentIndex]);
|
||||
Object.entries(this.params).forEach(([k, v]) => url.searchParams.append(k, v));
|
||||
return url.toString();
|
||||
},
|
||||
// 切换到下一个接口
|
||||
switchToNext() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.endpoints.length;
|
||||
return this.currentIndex < this.endpoints.length;
|
||||
},
|
||||
// 重置到第一个接口
|
||||
reset() {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
};
|
||||
|
||||
let elements = {};
|
||||
|
||||
// 初始化
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
initElements();
|
||||
loadMaoyanList();
|
||||
});
|
||||
|
||||
function initElements() {
|
||||
elements = {
|
||||
container: document.getElementById('ranking-content'),
|
||||
loading: document.getElementById('loading'),
|
||||
updateTime: document.getElementById('api-update-time'),
|
||||
statsTotal: document.getElementById('stats-total'),
|
||||
statsTop10: document.getElementById('stats-top10')
|
||||
};
|
||||
}
|
||||
|
||||
async function loadMaoyanList() {
|
||||
try {
|
||||
showLoading(true);
|
||||
|
||||
// 优先从线上API请求
|
||||
let data = await fetchFromAPI();
|
||||
|
||||
// 如果线上失败，尝试从本地返回接口.json加载
|
||||
if (!data) {
|
||||
data = await fetchFromLocal();
|
||||
}
|
||||
|
||||
if (!data || data.code !== 200 || !data.data) {
|
||||
throw new Error(data && data.message ? data.message : '未能获取到有效数据');
|
||||
}
|
||||
|
||||
renderRanking(data.data);
|
||||
} catch (error) {
|
||||
console.error('加载排行榜失败:', error);
|
||||
showError(error.message || '加载失败，请稍后重试');
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFromAPI() {
|
||||
// 初始化API接口列表
|
||||
await API.init();
|
||||
|
||||
// 重置API索引到第一个接口
|
||||
API.reset();
|
||||
|
||||
// 尝试所有API接口
|
||||
for (let i = 0; i < API.endpoints.length; i++) {
|
||||
try {
|
||||
const url = API.getCurrentUrl();
|
||||
console.log(`尝试接口 ${i + 1}/${API.endpoints.length}: ${url}`);
|
||||
|
||||
const resp = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
timeout: 10000 // 10秒超时
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data && data.code === 200) {
|
||||
console.log(`接口 ${i + 1} 请求成功`);
|
||||
return data;
|
||||
}
|
||||
|
||||
throw new Error(data && data.message ? data.message : '接口返回异常');
|
||||
|
||||
} catch (e) {
|
||||
console.warn(`接口 ${i + 1} 失败:`, e.message);
|
||||
|
||||
// 如果不是最后一个接口，切换到下一个
|
||||
if (i < API.endpoints.length - 1) {
|
||||
API.switchToNext();
|
||||
continue;
|
||||
}
|
||||
|
||||
// 所有接口都失败了
|
||||
console.warn('所有远程接口都失败，尝试本地数据');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFromLocal() {
|
||||
try {
|
||||
const resp = await fetch(API.localFallback + `?t=${Date.now()}`);
|
||||
if (!resp.ok) throw new Error(`本地文件HTTP ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
return data;
|
||||
} catch (e) {
|
||||
console.error('读取本地返回接口.json失败:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function renderRanking(payload) {
|
||||
const { list = [], tip = '', update_time = '', update_time_at } = payload || {};
|
||||
|
||||
// 更新时间
|
||||
if (elements.updateTime) {
|
||||
elements.updateTime.textContent = update_time ? `更新时间：${update_time}` : '';
|
||||
}
|
||||
|
||||
// 统计信息
|
||||
if (elements.statsTotal) {
|
||||
elements.statsTotal.textContent = list.length;
|
||||
}
|
||||
if (elements.statsTop10) {
|
||||
elements.statsTop10.textContent = Math.min(10, list.length);
|
||||
}
|
||||
|
||||
// 渲染列表
|
||||
const html = `
|
||||
<section class="stats-container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="stats-total">${list.length}</div>
|
||||
<div class="stat-label">入榜影片数量</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="stats-top10">${Math.min(10, list.length)}</div>
|
||||
<div class="stat-label">TOP10 数量</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="ranking-container">
|
||||
<h2 class="ranking-title">全球电影总票房排行榜</h2>
|
||||
<div class="movie-list">
|
||||
${list.map(item => renderMovieItem(item)).join('')}
|
||||
</div>
|
||||
</section>
|
||||
${tip ? `<div class="update-time">${escapeHtml(tip)}</div>` : ''}
|
||||
${update_time ? `<div class="update-time" id="api-update-time">更新时间：${escapeHtml(update_time)}</div>` : ''}
|
||||
`;
|
||||
|
||||
elements.container.innerHTML = html;
|
||||
elements.container.classList.add('fade-in');
|
||||
}
|
||||
|
||||
function renderMovieItem(item) {
|
||||
const rank = item.rank;
|
||||
const cls = rank === 1 ? 'top-1' : rank === 2 ? 'top-2' : rank === 3 ? 'top-3' : '';
|
||||
const badgeCls = rank === 1 ? 'gold' : rank === 2 ? 'silver' : rank === 3 ? 'bronze' : 'regular';
|
||||
|
||||
return `
|
||||
<div class="movie-item ${cls}">
|
||||
<div class="rank-badge ${badgeCls}">${rank}</div>
|
||||
<div class="movie-info">
|
||||
<div class="rank-number">#${rank}</div>
|
||||
<div class="movie-details">
|
||||
<div class="movie-name">${escapeHtml(item.movie_name)}</div>
|
||||
<div class="movie-year">上映年份：${escapeHtml(item.release_year || '')}</div>
|
||||
</div>
|
||||
<div class="box-office">
|
||||
<div class="box-office-amount">${formatCurrencyDesc(item.box_office_desc, item.box_office)}</div>
|
||||
<div class="box-office-desc">总票房</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function formatCurrencyDesc(desc, num) {
|
||||
if (desc && typeof desc === 'string' && desc.trim()) return desc;
|
||||
if (typeof num === 'number') {
|
||||
// 人民币按亿元显示
|
||||
if (num >= 1e8) return (num / 1e8).toFixed(2) + '亿元';
|
||||
if (num >= 1e4) return (num / 1e4).toFixed(2) + '万元';
|
||||
return num.toLocaleString('zh-CN') + '元';
|
||||
}
|
||||
return '—';
|
||||
}
|
||||
|
||||
function showLoading(show) {
|
||||
if (elements.loading) elements.loading.style.display = show ? 'block' : 'none';
|
||||
if (elements.container) elements.container.style.display = show ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
if (!elements.container) return;
|
||||
elements.container.innerHTML = `
|
||||
<div class="error">
|
||||
<h3>⚠️ 加载失败</h3>
|
||||
<p>${escapeHtml(message)}</p>
|
||||
<p>请稍后重试</p>
|
||||
</div>
|
||||
`;
|
||||
elements.container.style.display = 'block';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (text == null) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = String(text);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 键盘刷新快捷键 Ctrl/Cmd + R 刷新数据区域（不刷新整页）
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'r') {
|
||||
e.preventDefault();
|
||||
loadMaoyanList();
|
||||
}
|
||||
});
|
||||
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"
|
||||
]
|
||||
171
frontend/60sapi/热搜榜单/猫眼票房排行榜/返回接口.json
Normal file
171
frontend/60sapi/热搜榜单/猫眼票房排行榜/返回接口.json
Normal file
@@ -0,0 +1,171 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"rank": 1,
|
||||
"maoyan_id": 243,
|
||||
"movie_name": "阿凡达",
|
||||
"release_year": "2009",
|
||||
"box_office": 21200972239,
|
||||
"box_office_desc": "212.01亿元"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"maoyan_id": 248172,
|
||||
"movie_name": "复仇者联盟 4：终局之战",
|
||||
"release_year": "2019",
|
||||
"box_office": 20299852689,
|
||||
"box_office_desc": "203亿元"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"maoyan_id": 78461,
|
||||
"movie_name": "阿凡达：水之道",
|
||||
"release_year": "2022",
|
||||
"box_office": 16825062887,
|
||||
"box_office_desc": "168.25亿元"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"maoyan_id": 267,
|
||||
"movie_name": "泰坦尼克号",
|
||||
"release_year": "1997",
|
||||
"box_office": 16423064756,
|
||||
"box_office_desc": "164.23亿元"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"maoyan_id": 1294273,
|
||||
"movie_name": "哪吒之魔童闹海",
|
||||
"release_year": "2025",
|
||||
"box_office": 15908714214,
|
||||
"box_office_desc": "159.09亿元"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"maoyan_id": 78536,
|
||||
"movie_name": "星球大战：原力觉醒",
|
||||
"release_year": "2015",
|
||||
"box_office": 15019898914,
|
||||
"box_office_desc": "150.2亿元"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"maoyan_id": 248170,
|
||||
"movie_name": "复仇者联盟 3：无限战争",
|
||||
"release_year": "2018",
|
||||
"box_office": 14882882413,
|
||||
"box_office_desc": "148.83亿元"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"maoyan_id": 1254435,
|
||||
"movie_name": "蜘蛛侠：英雄无归",
|
||||
"release_year": "2021",
|
||||
"box_office": 14160042137,
|
||||
"box_office_desc": "141.6亿元"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"maoyan_id": 1479534,
|
||||
"movie_name": "头脑特工队 2",
|
||||
"release_year": "2024",
|
||||
"box_office": 12319141075,
|
||||
"box_office_desc": "123.19亿元"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"maoyan_id": 78602,
|
||||
"movie_name": "侏罗纪世界",
|
||||
"release_year": "2015",
|
||||
"box_office": 12120986621,
|
||||
"box_office_desc": "121.21亿元"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"maoyan_id": 1189879,
|
||||
"movie_name": "狮子王",
|
||||
"release_year": "2019",
|
||||
"box_office": 12051977766,
|
||||
"box_office_desc": "120.52亿元"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"maoyan_id": 262,
|
||||
"movie_name": "复仇者联盟",
|
||||
"release_year": "2012",
|
||||
"box_office": 11026033139,
|
||||
"box_office_desc": "110.26亿元"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"maoyan_id": 78405,
|
||||
"movie_name": "速度与激情 7",
|
||||
"release_year": "2015",
|
||||
"box_office": 10988354292,
|
||||
"box_office_desc": "109.88亿元"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"maoyan_id": 341152,
|
||||
"movie_name": "壮志凌云 2：独行侠",
|
||||
"release_year": "2022",
|
||||
"box_office": 10845892091,
|
||||
"box_office_desc": "108.46亿元"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"maoyan_id": 247949,
|
||||
"movie_name": "冰雪奇缘 2",
|
||||
"release_year": "2019",
|
||||
"box_office": 10541240357,
|
||||
"box_office_desc": "105.41亿元"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"maoyan_id": 344942,
|
||||
"movie_name": "芭比",
|
||||
"release_year": "2023",
|
||||
"box_office": 10493054406,
|
||||
"box_office_desc": "104.93亿元"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"maoyan_id": 78429,
|
||||
"movie_name": "复仇者联盟 2：奥创纪元",
|
||||
"release_year": "2015",
|
||||
"box_office": 10188347873,
|
||||
"box_office_desc": "101.88亿元"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"maoyan_id": 1250896,
|
||||
"movie_name": "超级马里奥兄弟大电影",
|
||||
"release_year": "2023",
|
||||
"box_office": 9868050757,
|
||||
"box_office_desc": "98.68亿元"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"maoyan_id": 341138,
|
||||
"movie_name": "黑豹",
|
||||
"release_year": "2018",
|
||||
"box_office": 9788853998,
|
||||
"box_office_desc": "97.89亿元"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"maoyan_id": 916,
|
||||
"movie_name": "哈利・波特与死亡圣器（下）",
|
||||
"release_year": "2011",
|
||||
"box_office": 9735002643,
|
||||
"box_office_desc": "97.35亿元"
|
||||
}
|
||||
],
|
||||
"tip": "注：内地票房数据实时更新，包括点映及预售票房。港澳台及海外票房为统计数据，每小时更新。汇率采用 2025年1月31日市场汇率，1美元≈7.2514人民币",
|
||||
"update_time": "2025/08/19 14:41:34",
|
||||
"update_time_at": 1755585694385
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user