60sapi接口搭建完毕,数据库连接测试成功,登录注册部分简单完成

This commit is contained in:
2025-09-02 19:45:50 +08:00
parent b139fb14d9
commit e1f8885c6c
150 changed files with 53045 additions and 8 deletions

View File

@@ -0,0 +1,327 @@
/* 每天60s读懂世界 - 清新风格样式 */
/* 重置样式 */
* {
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;
}
.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;
}
.header p {
color: #5a7c65;
font-size: 1.1rem;
}
/* 控制面板 */
.controls {
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08);
backdrop-filter: blur(10px);
}
.date-selector {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.date-selector label {
font-weight: 600;
color: #4a5568;
}
.date-selector input {
padding: 10px 15px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
}
.date-selector input:focus {
outline: none;
border-color: #81c784;
box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.1);
}
.btn {
background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
color: white;
border: none;
padding: 12px 25px;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(129, 199, 132, 0.4);
}
.btn:active {
transform: translateY(0);
}
/* 加载状态 */
.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); }
}
/* 内容区域 */
.content {
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);
}
.news-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.news-date {
font-size: 1.5rem;
font-weight: 700;
color: #2d5016;
}
.lunar-date {
color: #5a7c65;
font-size: 1rem;
}
/* 新闻图片 */
.news-image {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 15px;
margin: 20px auto;
display: block;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* 新闻列表 */
.news-list {
margin: 25px 0;
}
.news-item {
background: #f1f8e9;
border-left: 4px solid #81c784;
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 0 10px 10px 0;
transition: all 0.3s ease;
position: relative;
}
.news-item:hover {
background: #e8f5e8;
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(45, 80, 22, 0.1);
}
.news-item::before {
content: counter(news-counter);
counter-increment: news-counter;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
background: #81c784;
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
.news-list {
counter-reset: news-counter;
}
/* 每日一句 */
.daily-tip {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 20px;
border-radius: 15px;
margin: 25px 0;
text-align: center;
font-style: italic;
font-size: 1.1rem;
color: #744210;
box-shadow: 0 5px 20px rgba(252, 182, 159, 0.3);
}
/* 错误提示 */
.error {
background: #fed7d7;
color: #c53030;
padding: 20px;
border-radius: 10px;
text-align: center;
border: 1px solid #feb2b2;
}
/* 响应式设计 */
/* 平板端 */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.header h1 {
font-size: 2rem;
}
.header {
padding: 20px;
}
.content {
padding: 20px;
}
.date-selector {
flex-direction: column;
align-items: stretch;
}
.news-header {
flex-direction: column;
align-items: flex-start;
}
}
/* 手机端 */
@media (max-width: 480px) {
.container {
padding: 10px;
}
.header {
padding: 15px;
margin-bottom: 20px;
}
.header h1 {
font-size: 1.8rem;
}
.controls {
padding: 15px;
}
.content {
padding: 15px;
}
.news-item {
padding: 12px 15px;
margin-left: 10px;
}
.news-item::before {
left: -10px;
width: 20px;
height: 20px;
font-size: 0.7rem;
}
.daily-tip {
padding: 15px;
font-size: 1rem;
}
.btn {
width: 100%;
padding: 15px;
}
}
/* 大屏幕优化 */
@media (min-width: 1200px) {
.container {
padding: 40px;
}
.header {
padding: 40px;
}
.content {
padding: 40px;
}
}

View File

@@ -0,0 +1,49 @@
<!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="每天60秒读懂世界 - 获取最新资讯,了解天下大事">
<meta name="keywords" content="新闻,资讯,每日新闻,60秒读懂世界">
<title>每天60秒读懂世界 | 最新资讯</title>
<!-- 引入CSS样式 -->
<link rel="stylesheet" href="css/style.css">
<!-- 网站图标 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📰</text></svg>">
<!-- Open Graph 元数据 -->
<meta property="og:title" content="每天60秒读懂世界">
<meta property="og:description" content="获取最新资讯,了解天下大事">
<meta property="og:type" content="website">
</head>
<body>
<div class="container">
<!-- 页面头部 -->
<header class="header">
<h1>📰 每天60秒读懂世界</h1>
<p>获取最新资讯,了解天下大事</p>
</header>
<!-- 主要内容区域 -->
<main id="content" class="content">
<!-- 内容将通过JavaScript动态加载 -->
<div class="loading">
<div class="spinner"></div>
<p>正在加载今日资讯...</p>
</div>
</main>
</div>
<!-- 页面底部 -->
<footer style="text-align: center; padding: 20px; color: rgba(255,255,255,0.8); font-size: 0.9rem;">
<p>Made with ❤️ | 数据来源每天60秒读懂世界API</p>
</footer>
<!-- 引入JavaScript -->
<script src="js/script.js"></script>
</body>
</html>

View File

@@ -0,0 +1,305 @@
// 每天60s读懂世界 - 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/60s`);
} catch (e) {
// 如果无法加载接口集合,使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/60s'];
}
},
// 获取当前接口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;
}
};
class NewsApp {
constructor() {
this.apiUrl = 'https://60s.viki.moe/v2/60s';
this.init();
}
init() {
this.bindEvents();
this.loadTodayNews();
}
bindEvents() {
// 移除了刷新按钮,不需要绑定事件
}
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
showLoading() {
const contentDiv = document.getElementById('content');
if (contentDiv) {
contentDiv.innerHTML = `
<div class="loading">
<div class="spinner"></div>
<p>正在获取最新资讯...</p>
</div>
`;
}
}
showError(message) {
const contentDiv = document.getElementById('content');
if (contentDiv) {
contentDiv.innerHTML = `
<div class="error">
<h3>😔 获取失败</h3>
<p>${message}</p>
</div>
`;
}
}
async loadNews() {
try {
this.showLoading();
// 尝试从API获取数据
let data = await this.fetchFromAPI();
// 如果API失败尝试本地数据
if (!data) {
data = await this.fetchFromLocal();
}
if (!data) {
throw new Error('无法获取数据,请检查网络连接或稍后重试');
}
if (data.code !== 200) {
throw new Error(data.message || '获取数据失败');
}
this.renderNews(data.data);
} catch (error) {
console.error('获取新闻失败:', error);
this.showError(error.message || '网络连接失败,请检查网络后重试');
}
}
async 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'
});
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 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;
}
}
loadTodayNews() {
this.loadNews();
}
renderNews(newsData) {
const contentDiv = document.getElementById('content');
if (!contentDiv || !newsData) return;
const {
date,
day_of_week,
lunar_date,
news,
tip,
link
} = newsData;
let newsListHtml = '';
if (news && news.length > 0) {
newsListHtml = news.map(item => `
<div class="news-item">
${this.escapeHtml(item)}
</div>
`).join('');
}
// 移除图片显示功能
const tipHtml = tip ? `
<div class="daily-tip">
💡 ${this.escapeHtml(tip)}
</div>
` : '';
const linkHtml = link ? `
<div style="text-align: center; margin-top: 20px;">
<a href="${this.escapeHtml(link)}" target="_blank" class="btn" style="text-decoration: none; display: inline-block;">
📖 查看原文
</a>
</div>
` : '';
contentDiv.innerHTML = `
<div class="news-header">
<div>
<div class="news-date">${this.escapeHtml(date)} ${this.escapeHtml(day_of_week || '')}</div>
${lunar_date ? `<div class="lunar-date">${this.escapeHtml(lunar_date)}</div>` : ''}
</div>
</div>
${tipHtml}
<div class="news-list">
<h3 style="margin-bottom: 20px; color: #2d5016; font-size: 1.3rem;">📰 今日要闻</h3>
${newsListHtml}
</div>
${linkHtml}
<div style="text-align: center; margin-top: 30px; color: #5a7c65; font-size: 0.9rem;">
<p>数据来源每天60秒读懂世界</p>
<p>更新时间:${newsData.api_updated || '未知'}</p>
</div>
`;
}
escapeHtml(text) {
if (typeof text !== 'string') return text;
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
// 页面加载完成后初始化应用
document.addEventListener('DOMContentLoaded', function() {
window.newsApp = new NewsApp();
});
// 添加一些实用功能
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
showToast('已复制到剪贴板');
}).catch(() => {
showToast('复制失败,请手动复制');
});
}
function showToast(message) {
// 创建提示框
const toast = document.createElement('div');
toast.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #4a5568;
color: white;
padding: 12px 20px;
border-radius: 8px;
z-index: 1000;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
animation: slideIn 0.3s ease;
`;
toast.textContent = message;
// 添加动画样式
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
`;
document.head.appendChild(style);
document.body.appendChild(toast);
// 3秒后自动移除
setTimeout(() => {
toast.remove();
style.remove();
}, 3000);
}
// 添加键盘快捷键支持
document.addEventListener('keydown', function(e) {
// Ctrl/Cmd + R 刷新数据
if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
e.preventDefault();
if (window.newsApp) {
window.newsApp.loadNews();
}
}
});

View 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"
]

View File

@@ -0,0 +1,66 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头,以确保稳定与实时。开源地址 https://github.com/vikiboss/60s反馈群 595941841",
"data": [
{
"id": "9aa227e2ba294bb1a95c95fde892eb31",
"title": "《Totally Reliable Delivery Service》 Standard Edition",
"cover": "https://cdn1.epicgames.com/52b90f9a982a404781b189f6a7903226/offer/EGS_TotallyReliableDeliveryService_WereFiveGames_S1-2560x1440-47e6e9562d62705a75ea7b7096d0b8dc.jpg",
"original_price": 52,
"original_price_desc": "¥52.00",
"description": "穿好护腰护具发动货车送货的时间到啦在一个高度互动的沙盒世界中与最多三位好友一起随意地完成送货。货物已试投这就是我们靠谱快递Totally Reliable Delivery Service的品质保证",
"seller": "Infogrames LLC",
"is_free_now": true,
"free_start": "2025/08/14 23:00:00",
"free_start_at": 1755183600000,
"free_end": "2025/08/21 23:00:00",
"free_end_at": 1755788400000,
"link": "https://store.epicgames.com/store/zh-CN/p/totally-reliable-delivery-service/home"
},
{
"id": "8ea3500dc38e4f429702bf889c172d3d",
"title": "Hidden Folks",
"cover": "https://cdn1.epicgames.com/spt-assets/7bfd56b0586348dcb139945d9e59f988/hidden-folks-1b7hh.png",
"original_price": 47,
"original_price_desc": "¥47.00",
"description": "Search for hidden folks in hand-drawn, interactive, miniature landscapes. Unfurl tent flaps, cut through bushes, slam doors, and poke some crocodiles! Rooooaaaarrrr!!!!!",
"seller": "Adriaan de Jongh",
"is_free_now": true,
"free_start": "2025/08/14 23:00:00",
"free_start_at": 1755183600000,
"free_end": "2025/08/21 23:00:00",
"free_end_at": 1755788400000,
"link": "https://store.epicgames.com/store/zh-CN/p/hidden-folks-239d16"
},
{
"id": "4cbb6c3704d240f19c3dd5f5cb2b0cb4",
"title": "Kamaeru",
"cover": "https://cdn1.epicgames.com/spt-assets/44313cfbb62b4df5801d0c8d541c2624/kamaeru-40asc.png",
"original_price": 62,
"original_price_desc": "¥62.00",
"description": "Foster a sanctuary for frogs and restore the biodiversity of the wetlands in Kamaeru, a cozy frog collecting game, where you take pictures of frogs, play mini-games and decorate your habitat. Hop right to it!",
"seller": "Armor Games Studios",
"is_free_now": false,
"free_start": "2025/08/21 23:00:00",
"free_start_at": 1755788400000,
"free_end": "2025/08/28 23:00:00",
"free_end_at": 1756393200000,
"link": "https://store.epicgames.com/store/zh-CN/p/kamaeru-0c301e"
},
{
"id": "0d9a533f0e684cc18620a8f408e8e72c",
"title": "Strange Horticulture",
"cover": "https://cdn1.epicgames.com/spt-assets/15e8e3eba65a4763a815d6eae1d763b2/strange-horticulture-offer-2wghv.png",
"original_price": 45,
"original_price_desc": "¥45.00",
"description": "款神秘学解谜游戏,你将扮演当地植物商店的店主,寻找并识别新的植物,悠闲撸猫,与女巫团体交谈,或加入异教。收集各种强大的植物,用它们来影响故事走向,揭开昂德米尔镇的黑暗谜团。",
"seller": "Iceberg Interactive",
"is_free_now": false,
"free_start": "2025/08/21 23:00:00",
"free_start_at": 1755788400000,
"free_end": "2025/08/28 23:00:00",
"free_end_at": 1756393200000,
"link": "https://store.epicgames.com/store/zh-CN/p/strange-horticulture-360e80"
}
]
}