yangyang3917.github.io/404.html at main · yangyang3917/yangyang3917.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>404 - yangyang3917的网页</title>
<style>
/* 定义渐变文本样式 */
.jianbianwenben {
    /* 使用 CSS 变量定义默认渐变颜色（可自定义修改） */
    --color-start: #ff6b6b;  /* 渐变开始颜色 */
    --color-end: #4ecdc4;    /* 渐变结束颜色 */
    --font-size: 25px; /*字号（可自定义）*/
    --font-weight: Light;

    /* 设置线性渐变背景 */
    background: linear-gradient(
      90deg,  /* 渐变方向（默认水平，90deg 表示从左到右） */
      var(--color-start),
      var(--color-end)
    );

    /* 裁剪背景到文字区域 */
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: var(--font-weight);
    font-size: var(--font-size);

    /* 隐藏原始文字颜色 */
    color: transparent;

    display: inline-block; /* 让文本在同一行内显示，确保可以正常显示渐变效果 */
  }
    /* 初始占位背景 */
body {
  background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
  transition: background-image 0.5s ease;
}

</style>
</head>
<body>
<p>
    <span class="jianbianwenben" style="--color-start: #6200ff; --color-end: #0099ff; --font-size: 45px; --font-weight: bold;">欢迎来到yangyang3917的网页</span>
</p>
<p></p>
<span style="color: #ff0000;font-size: 30px">
    当前位置：404（<a href="https://yangyang3917.github.io/html/404.html">404.html</a>）
</span>
<hr style="width: 100%; border: none; border-top: 2px dashed white; margin: 20px auto;"></hr>
<p>
    <span style="color: #ff0000; font-size: 55px; font-weight: bold;">你所请求的界面不存在</span>
</p>
<hr style="width: 100%; border: none; border-top: 2px dashed white; margin: 20px auto;"></hr>
<p><a href="https://github.com/yangyang3917/yangyang3917.github.io" target="_blank" style="color: #ffff01;font-size:25px">查看源码（点击打开）</a></p>
<p><a href="index.html" style="color: #8400ff;font-size:25px" >返回上一页（点击）</a></p>
<p style="color: #ffffff; font-size: 15px;">powered by <a href="https://docs.github.com/pages" target="_blank"">GitHub Pages</a></p>
<script>
    // ========== 工具函数 ==========
const getToday = () => new Date().toISOString().split('T')[0];

const cleanCache = () => {
  const cache = JSON.parse(localStorage.getItem('bingImageCache') || '{"images":[]}');
  const now = new Date();
  const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);

  // 保留一周内的缓存 + 至少一张备用
  const validCache = cache.images.filter(entry => new Date(entry.date) >= oneWeekAgo);
  if (validCache.length === 0 && cache.images.length > 0) {
    validCache.push(cache.images.sort((a, b) => new Date(b.date) - new Date(a.date))[0]);
  }

  cache.images = validCache;
  localStorage.setItem('bingImageCache', JSON.stringify(cache));
};

// ========== 核心逻辑 ==========
const fetchBingImageUrl = async () => {
  try {
    // 发起请求（需目标接口允许跨域）
    const response = await fetch('https://tool.liumingye.cn/bingimg/img.php');

    // 302 重定向时，response.url 为最终图片地址
    if (response.redirected) {
      return response.url;
    }

    throw new Error('未发生重定向');
  } catch (error) {
    console.error('获取图片失败:', error);
    return null;
  }
};

const applyBackground = (url) => {
  const img = new Image();
  img.src = url;
  img.onload = () => {
    document.body.style.backgroundImage = `url(${url})`;
  };
  img.onerror = () => {
    console.warn('图片加载失败，尝试备用缓存');
    const cache = JSON.parse(localStorage.getItem('bingImageCache') || '{"images":[]}');
    if (cache.images.length > 0) {
      applyBackground(cache.images[0].url);
    }
  };
};

const setBackground = async () => {
  const cache = JSON.parse(localStorage.getItem('bingImageCache') || '{"images":[]}');
  const today = getToday();
  const todayEntry = cache.images.find(entry => entry.date.startsWith(today));

  // 使用今日缓存
  if (todayEntry) {
    applyBackground(todayEntry.url);
    return;
  }

  // 获取新图片
  const newUrl = await fetchBingImageUrl();
  if (!newUrl) {
    if (cache.images.length > 0) {
      applyBackground(cache.images[0].url);
    }
    return;
  }

  // 更新缓存
  cache.images.push({ url: newUrl, date: new Date().toISOString() });
  localStorage.setItem('bingImageCache', JSON.stringify(cache));
  cleanCache(); // 清理旧缓存
  applyBackground(newUrl);
};

// ========== 初始化 ==========
document.addEventListener('DOMContentLoaded', setBackground);
</script>
</body>
</html>