把大致框架搭好1

This commit is contained in:
2025-09-02 08:40:37 +08:00
parent 56659d9790
commit b139fb14d9
108 changed files with 25897 additions and 3 deletions

View File

@@ -0,0 +1,326 @@
/* 必应每日壁纸 - 淡绿色清新风格样式 */
/* 重置样式 */
* {
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); }
}
/* 壁纸容器 */
.wallpaper-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;
}
/* 壁纸信息 */
.wallpaper-info {
text-align: center;
margin-bottom: 25px;
}
.wallpaper-title {
font-size: 1.8rem;
font-weight: 700;
color: #2d5016;
margin-bottom: 10px;
}
.wallpaper-date {
color: #5a7c65;
font-size: 1rem;
margin-bottom: 15px;
}
.wallpaper-description {
color: #2d5016;
font-size: 1.1rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* 壁纸图片 */
.wallpaper-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(45, 80, 22, 0.15);
margin: 20px 0;
}
.wallpaper-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.wallpaper-image:hover img {
transform: scale(1.02);
}
/* 下载按钮 */
.download-section {
text-align: center;
margin-top: 25px;
}
.download-btn {
background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(129, 199, 132, 0.4);
}
.download-btn:active {
transform: translateY(0);
}
/* 错误提示 */
.error {
background: #fed7d7;
color: #c53030;
padding: 20px;
border-radius: 15px;
text-align: center;
border: 1px solid #feb2b2;
margin: 20px 0;
}
/* 版权信息 */
.copyright {
background: rgba(255, 255, 255, 0.7);
border-radius: 15px;
padding: 20px;
text-align: center;
color: #5a7c65;
font-size: 0.9rem;
margin-top: 20px;
}
/* 响应式设计 */
/* 平板端 */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.header h1 {
font-size: 2rem;
flex-direction: column;
gap: 10px;
}
.header {
padding: 20px;
}
.wallpaper-container {
padding: 20px;
}
.wallpaper-title {
font-size: 1.5rem;
}
.wallpaper-description {
font-size: 1rem;
}
}
/* 手机端 */
@media (max-width: 480px) {
.container {
padding: 10px;
}
.header {
padding: 15px;
margin-bottom: 20px;
}
.header h1 {
font-size: 1.8rem;
}
.wallpaper-container {
padding: 15px;
}
.wallpaper-title {
font-size: 1.3rem;
}
.wallpaper-description {
font-size: 0.95rem;
}
.download-btn {
padding: 12px 25px;
font-size: 1rem;
width: 100%;
justify-content: center;
}
.copyright {
padding: 15px;
font-size: 0.8rem;
}
}
/* 大屏幕优化 */
@media (min-width: 1200px) {
.container {
padding: 40px;
}
.header {
padding: 40px;
}
.wallpaper-container {
padding: 40px;
}
.wallpaper-image {
max-height: 70vh;
overflow: hidden;
}
.wallpaper-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* 特殊效果 */
.fade-in {
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 图片加载效果 */
.wallpaper-image img {
opacity: 0;
transition: opacity 0.3s ease;
}
.wallpaper-image img.loaded {
opacity: 1;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
background: rgba(129, 199, 132, 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(129, 199, 132, 0.7);
}

View File

@@ -0,0 +1,42 @@
<!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>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="css/style.css">
<!-- 网站图标 -->
<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="wallpaper-content" class="content" style="display: none;">
<!-- 壁纸内容将通过JavaScript动态加载 -->
</main>
</div>
<!-- 引入脚本文件 -->
<script src="js/script.js"></script>
</body>
</html>

View File

@@ -0,0 +1,315 @@
// 必应每日壁纸 JavaScript 功能
// API配置
const API = {
endpoints: [],
currentIndex: 0,
params: {
encoding: 'json'
},
// 初始化API接口列表
async init() {
try {
const res = await fetch('./接口集合.json');
const endpoints = await res.json();
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/bing`);
} catch (e) {
// 如果无法加载接口集合,使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/bing'];
}
},
// 获取当前接口URL
getCurrentUrl() {
if (this.endpoints.length === 0) return null;
const url = new URL(this.endpoints[this.currentIndex]);
Object.keys(this.params).forEach(key => {
url.searchParams.append(key, this.params[key]);
});
return url.toString();
},
// 切换到下一个接口
switchToNext() {
this.currentIndex = (this.currentIndex + 1) % this.endpoints.length;
return this.currentIndex < this.endpoints.length;
},
// 重置到第一个接口
reset() {
this.currentIndex = 0;
}
};
// DOM元素
let elements = {};
// 初始化
document.addEventListener('DOMContentLoaded', function() {
initElements();
loadWallpaper();
});
// 初始化DOM元素
function initElements() {
elements = {
container: document.getElementById('wallpaper-content'),
loading: document.getElementById('loading')
};
}
// 加载壁纸数据
async function loadWallpaper() {
try {
showLoading(true);
// 初始化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 response = await fetch(url, {
cache: 'no-store',
timeout: 10000 // 10秒超时
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
console.log('API响应数据:', data);
// 检查数据有效性
if (data && (data.code === 200 || data.data)) {
console.log(`接口 ${i + 1} 请求成功`);
displayWallpaper(data);
return;
}
throw new Error(data && data.message ? data.message : '接口返回异常');
} catch (error) {
console.warn(`接口 ${i + 1} 失败:`, error.message);
// 如果不是最后一个接口,切换到下一个
if (i < API.endpoints.length - 1) {
API.switchToNext();
continue;
}
// 所有接口都失败了,抛出错误
throw new Error('所有接口都无法访问');
}
}
} catch (error) {
console.error('加载壁纸失败:', error);
showError('加载壁纸失败,请稍后重试');
} finally {
showLoading(false);
}
}
// 显示壁纸
function displayWallpaper(data) {
if (!data) {
showError('没有获取到壁纸数据');
return;
}
// 提取壁纸信息
const wallpaperInfo = extractWallpaperInfo(data);
if (!wallpaperInfo || !wallpaperInfo.imageUrl) {
showError('壁纸图片链接无效');
return;
}
// 生成HTML内容
const html = generateWallpaperHTML(wallpaperInfo);
// 显示内容
elements.container.innerHTML = html;
elements.container.classList.add('fade-in');
// 绑定图片加载事件
bindImageEvents();
}
// 提取壁纸信息
function extractWallpaperInfo(data) {
// 根据API响应结构提取信息
let imageUrl = '';
let title = '必应每日壁纸';
let description = '';
let date = new Date().toLocaleDateString('zh-CN');
let copyright = '';
// 处理新的API响应格式
if (data.data) {
const wallpaperData = data.data;
title = wallpaperData.title || title;
description = wallpaperData.description || wallpaperData.main_text || '';
copyright = wallpaperData.copyright || '';
date = wallpaperData.update_date || date;
// 提取图片URL去除反引号
if (wallpaperData.cover) {
imageUrl = wallpaperData.cover.replace(/`/g, '').trim();
}
}
// 处理其他可能的API响应格式
else if (data.url) {
imageUrl = data.url;
} else if (data.image_url) {
imageUrl = data.image_url;
} else if (data.images && data.images.length > 0) {
imageUrl = data.images[0].url || data.images[0].image_url;
title = data.images[0].title || title;
description = data.images[0].description || data.images[0].copyright || '';
copyright = data.images[0].copyright || '';
}
// 如果是相对路径转换为完整URL
if (imageUrl && imageUrl.startsWith('/')) {
imageUrl = 'https://www.bing.com' + imageUrl;
}
// 确保图片URL有效
if (!imageUrl || imageUrl === '') {
console.error('无法提取图片URL原始数据:', data);
return null;
}
return {
imageUrl,
title,
description: description || copyright,
date,
copyright
};
}
// 生成壁纸HTML
function generateWallpaperHTML(info) {
return `
<div class="wallpaper-container">
<div class="wallpaper-info">
<h2 class="wallpaper-title">${escapeHtml(info.title)}</h2>
<div class="wallpaper-date">${info.date}</div>
${info.description ? `<div class="wallpaper-description">${escapeHtml(info.description)}</div>` : ''}
</div>
<div class="wallpaper-image">
<img src="${info.imageUrl}" alt="${escapeHtml(info.title)}" loading="lazy">
</div>
<div class="download-section">
<a href="${info.imageUrl}" class="download-btn" download="bing-wallpaper-${info.date}.jpg" target="_blank">
<span>📥</span>
下载壁纸
</a>
</div>
</div>
${info.copyright ? `
<div class="copyright">
<p>${escapeHtml(info.copyright)}</p>
</div>
` : ''}
`;
}
// 绑定图片事件
function bindImageEvents() {
const images = elements.container.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('load', function() {
this.classList.add('loaded');
});
img.addEventListener('error', function() {
console.error('图片加载失败:', this.src);
this.parentElement.innerHTML = `
<div class="error">
<p>🖼️ 图片加载失败</p>
<p>请检查网络连接或稍后重试</p>
</div>
`;
});
});
}
// 显示/隐藏加载状态
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) {
elements.container.innerHTML = `
<div class="error">
<h3>⚠️ 加载失败</h3>
<p>${escapeHtml(message)}</p>
<p>请检查网络连接或稍后重试</p>
</div>
`;
elements.container.style.display = 'block';
}
}
// HTML转义
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 格式化日期
function formatDate(dateString) {
try {
const date = new Date(dateString);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
} catch (error) {
return dateString;
}
}
// 错误处理
window.addEventListener('error', function(event) {
console.error('页面错误:', event.error);
});
// 网络状态监听
window.addEventListener('online', function() {
console.log('网络已连接');
});
window.addEventListener('offline', function() {
console.log('网络已断开');
showError('网络连接已断开,请检查网络设置');
});
// 导出函数供外部调用
window.BingWallpaper = {
loadWallpaper,
showError,
showLoading
};

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,15 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头,以确保稳定与实时。开源地址 https://github.com/vikiboss/60s反馈群 595941841",
"data": {
"title": "瑟沃格湖,瓦加尔岛,法罗群岛",
"headline": "海洋上方的湖泊",
"description": "大自然自有其奇妙之处瑟沃格湖Sørvágsvatn便是其中最精彩的之一。世界湖泊日是探索法罗群岛丹麦王国的一个自治行政区这片视错觉的绝佳时机。这座位于沃格岛上的湖泊也被称为莱蒂斯湖Leitisvatn看似漂浮在海平面之上。实际上它的海拔不到100英尺。索尔瓦格斯湖是法罗群岛最大的湖泊面积约1.3平方英里为Bøsdalafossur瀑布Bøsdalafossur提供水源瀑布的湖水在那里奔腾而下最终倾泻而入大海。",
"main_text": "该湖位于瓦加尔岛南部通过Bøsdalafossur瀑布与大西洋相连形成了壮丽的“悬湖”景观。",
"cover": "https://bing.com/th?id=OHR.FaroeLake_ZH-CN3977660997_1920x1080.jpg",
"cover_4k": "https://bing.com/th?id=OHR.FaroeLake_ZH-CN3977660997_UHD.jpg",
"copyright": "© Anton Petrus/Getty Images",
"update_date": "2025-08-27 13:24:37",
"update_date_at": 1756301077809
}
}