自定义页脚
<div class="wrapper">
<div class="content">
<div class="footer-content">
<div class="runtime">
<span>网页已运营 </span>
<span id="sitetime">0年 0天 0小时 0分钟 0秒</span>
</div>
<div class="credit">
<span>Exia自用导航🧭</span> | <span>🚀Powered By <a href="https://github.com/hslr-s/sun-panel" target="_blank">Sun-pannel</a></span>
</div>
<div class="user-ip">
<span>您的IP地址: </span>
<span id="user-ip">获取中...</span>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
自定义JS
document.addEventListener('DOMContentLoaded', function() {
// ==================== 1. 视频背景功能 ====================
const addVideoBackground = (wallpaperDiv) => {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.style.position = 'absolute';
video.style.top = '0';
video.style.left = '0';
video.style.width = '100%';
video.style.height = '100%';
video.style.objectFit = 'cover';
const videoSources = [
'/uploads/2025/4/0/6.mp4', // 替换成你的视频路径
];
const randomSource = videoSources[Math.floor(Math.random() * videoSources.length)];
const source = document.createElement('source');
source.src = randomSource;
source.type = 'video/mp4';
video.appendChild(source);
video.addEventListener('loadedmetadata', () => {
video.play().catch(error => console.error('视频播放失败:', error));
});
wallpaperDiv.appendChild(video);
};
// 使用 MutationObserver 确保元素加载完成
const observer = new MutationObserver((mutations, obs) => {
const wallpaperDiv = document.querySelector('.cover.wallpaper');
if (wallpaperDiv) {
addVideoBackground(wallpaperDiv);
obs.disconnect(); // 找到后停止监听
}
});
observer.observe(document.body, { childList: true, subtree: true });
// ==================== 2. 网站运行时间计时器 ====================
function updateSiteTime() {
const targetDate = new Date(2024, 11, 23); // 2024年12月23日
const now = new Date();
const diff = now - targetDate;
const seconds = 1000;
const minutes = seconds * 60;
const hours = minutes * 60;
const days = hours * 24;
const years = days * 365;
const totalYears = Math.floor(diff / years);
const remainingTime = diff % years;
const diffDays = Math.floor(remainingTime / days);
const diffHours = Math.floor((remainingTime % days) / hours);
const diffMinutes = Math.floor((remainingTime % hours) / minutes);
const diffSeconds = Math.floor((remainingTime % minutes) / seconds);
const timeText = `${totalYears} 年 ${diffDays} 天 ${diffHours} 小时 ${diffMinutes} 分钟 ${diffSeconds} 秒`;
const timeElement = document.getElementById('sitetime');
if (timeElement) timeElement.textContent = timeText;
setTimeout(updateSiteTime, 1000); // 每秒更新
}
updateSiteTime(); // 启动计时器
// ==================== 3. 获取访客IP ====================
function getVisitorIP() {
const apis = [
'https://api.ipify.org?format=json', // 主 API
'https://ipapi.co/json/', // 备用 API 1
'https://ipinfo.io/json', // 备用 API 2
'https://api.myip.com', // 备用 API 3
];
// 尝试所有 API，直到成功
const tryAPI = (index) => {
if (index >= apis.length) {
updateIPDisplay('未知 (API 不可用)');
return;
}
fetch(apis[index])
.then(response => {
if (!response.ok) throw new Error('请求失败');
return response.json();
})
.then(data => {
const ip = data.ip || data.ip_address || data.query;
if (ip) updateIPDisplay(ip);
else throw new Error('IP 字段不存在');
})
.catch(error => {
console.error(`API ${apis[index]} 失败:`, error);
tryAPI(index + 1); // 尝试下一个 API
});
};
tryAPI(0); // 从第一个 API 开始
}
function updateIPDisplay(ip) {
const ipElement = document.getElementById('user-ip');
if (ipElement) ipElement.textContent = ip;
}
getVisitorIP(); // 启动 IP 获取
});
自定义CSS
/* 保持 Flexbox 结构不变 */
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
text-align: center; /* 确保内容居中 */
}
.title {
margin: 0; /* 移除默认的外边距 */
font-size: 16px; /* 根据需要调整字体大小 */
}
.footer {
color: #ffffff;
background: transparent; /* 透明背景 */
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
margin-top: auto; /* 自动推到容器底部 */
}
.runtime {
font-weight: bold; /* 加粗网站运行时间 */
display: flex;
align-items: center;
}
.runtime span {
margin: 0 5px; /* 调整内部元素间距 */
}
.footer-content {
display: flex;
flex-direction: column; /* 使内容垂直排列 */
align-items: center; /* 垂直居中 */
}
.footer-content div {
margin: 5px 0; /* 调整每行之间的间距 */
}
不错的导航，这就去跑一个
