哪吒监控面板SeverStatus美化及手机端自定义增加剩余时间列，并添加倒计时进度条动画

最新推荐文章于 2025-05-23 10:43:20 发布

oocun

最新推荐文章于 2025-05-23 10:43:20 发布

阅读量420

点赞数

文章标签：服务器

原文链接：https://www.nodeseek.com/post-151790-1

版权

<style>
/* 手机端（屏幕宽度小于 1080px）样式 */
@media (max-width: 1080px) {
.load {
display: none; /* 隐藏负载列 */
}
.os {
display: none; /* 隐藏负载列 */
}
.traffic {
display: block; /* 隐藏负载列 */
}
.name {
width: 10px; /* 将宽度固定为 30px */
overflow: hidden; /* 隐藏超出部分 */
white-space: nowrap; /* 禁止换行 */
text-overflow: ellipsis; /* 如果内容超过宽度，显示省略号 */
}
}
body[theme]::before {
background-image: url(https://imgapi.cn/bing.php?rand=true); /* 替换为自己的背景图片链接 */
}

/* 字体设置 */
body[theme] {
font-family: "Consolas", Arial, Helvetica, sans-serif; /* 修改默认字体 */
}
</style>

<script>
// server-status 默认开启分组
localStorage.setItem("showGroup", true)
// server-status 主题默认半透明模式
localStorage.setItem('semiTransparent', true);
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var logo = document.querySelector('.navbar-brand img');
if (logo) {
logo.src = 'https://xmac.im/gg/logo.png'; /* 替换为自己的 Logo 图片链接 */
}
});
</script>

<script>
var faviconurl = "https://xmac.im/gg/logo.png"; /* 替换为自己的 Logo 图片链接 */
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/png';
link.rel = 'shortcut icon';
link.href = faviconurl;
document.getElementsByTagName('head')[0].appendChild(link);
</script>

<style>
.service-status .delay-today-text{display: none;visibility: hidden;}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
// 在表头添加“剩余时间”列
var downtimeCells = document.querySelectorAll('th.node-cell.os.center');
downtimeCells.forEach(function(cell) {
var newTh = document.createElement('th');
newTh.className = 'node-cell downtime center';
newTh.textContent = '剩余时间';
cell.parentNode.insertBefore(newTh, cell.nextSibling);
});
// 定义节点信息
const affLinks = {
10: {
startDate: new Date('2024-08-12T00:00:00+08:00'),
expirationDate: new Date('2025-11-14T23:59:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 正常节点 */
999: {
startDate: new Date('2024-08-12T00:00:00+08:00'),
expirationDate: new Date('2024-08-20T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 过期节点 */
9: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       8: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       7: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       6: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       5: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       4: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       3: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       2: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
       1: {
startDate: new Date('9999-01-01T00:00:00+08:00'),
expirationDate: new Date('9999-01-01T00:00:00+08:00'),
content: {
type: 'text',
value: ''
}
},/* 永久节点 */
};

const createLink = (linkConfig) => {
const $link = document.createElement('a');
$link.href = linkConfig.value;
$link.textContent = linkConfig.label || linkConfig.value;

if (linkConfig.icon) {
const $icon = document.createElement('img');
$icon.src = linkConfig.icon;
$icon.alt = linkConfig.iconAlt || '';
$link.appendChild($icon);
}

if (linkConfig.text) {
const $text = document.createElement('span');
$text.textContent = linkConfig.text;
$link.appendChild(document.createTextNode(' '));
$link.appendChild($text);
}

return $link;
};

const createIcon = (iconConfig) => {
const $icon = document.createElement('img');
$icon.src = iconConfig.value;
$icon.alt = iconConfig.label || 'Icon';

if (iconConfig.text) {
const $text = document.createElement('span');
$text.textContent = iconConfig.text;
$icon.appendChild(document.createTextNode(' '));
$icon.appendChild($text);
}

return $icon;
};

const createSmokeAnimation = () => {
const $smokeContainer = document.createElement('div');
$smokeContainer.className = 'smoke-container';

for (let i = 0; i < 5; i++) {
const $particle = document.createElement('div');
$particle.className = 'smoke-particle';
$smokeContainer.appendChild($particle);
}

return $smokeContainer;
};

const createCountdown = (startDate, expirationDate) => {
const total = expirationDate.getTime() - startDate.getTime();

const $countdownContainer = document.createElement('div');
$countdownContainer.style.position = 'relative';
$countdownContainer.style.width = '100%';
$countdownContainer.style.backgroundColor = '#333';
$countdownContainer.style.borderRadius = '5px';
$countdownContainer.style.overflow = 'hidden';
$countdownContainer.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3)'; // 背景3D效果
$countdownContainer.style.background = 'linear-gradient(to bottom, #444, #222)'; // 背景渐变效果

const $progressBar = document.createElement('div');
$progressBar.style.position = 'absolute';
$progressBar.style.top = '0';
$progressBar.style.left = '0';
$progressBar.style.height = '100%';
$progressBar.style.backgroundColor = '#388e3c'; // 调暗后的绿色进度条
$progressBar.style.width = '0%';
$progressBar.style.boxShadow = 'inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3)'; // 进度条3D效果

const $countdownTime = document.createElement('span');
$countdownTime.style.position = 'relative';
$countdownTime.style.zIndex = '1';
$countdownTime.style.color = '#fff'; // 恢复为白色字体
$countdownTime.style.padding = '5px';
$countdownTime.style.fontSize = '12px'; // 调小字体
$countdownTime.textContent = ' ';

const $smoke = createSmokeAnimation();

const updateCountdown = () => {
const now = new Date();
const diff = now.getTime() - startDate.getTime();

// 判断是否为特殊日期
if (startDate.getTime() === new Date('9999-01-01T00:00:00+08:00').getTime() &&
expirationDate.getTime() === new Date('9999-01-01T00:00:00+08:00').getTime()) {
$progressBar.style.width = '100%';
$progressBar.style.backgroundColor = '#2e7d32'; // 特殊情况的颜色（绿色）
$countdownTime.textContent = '999天';
return;
}

if (diff >= total) {
clearInterval(countdownInterval);
$countdownTime.textContent = '已过期';
$progressBar.style.backgroundColor = '#c62828'; // 到期后的深红色
$progressBar.style.width = '100%';
return;
}

const remainingDays = Math.ceil((total - diff) / (1000 * 60 * 60 * 24));
$countdownTime.textContent = `${remainingDays}天`;
const progress = 100 - (diff / total) * 100;
$progressBar.style.width = `${progress}%`;

// 根据剩余进度设置进度条颜色
if (progress <= 25) {
$progressBar.style.backgroundColor = '#c05000'; // 橙色
} else if (progress <= 50) {
$progressBar.style.backgroundColor = '#f9a825'; // 黄色
} else {
$progressBar.style.backgroundColor = '#388e3c'; // 绿色
}

// 更新烟雾动画的位置
$smoke.style.left = `${progress}%`;
};

const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();

$countdownContainer.appendChild($progressBar);
$progressBar.appendChild($smoke);
$countdownContainer.appendChild($countdownTime);

return $countdownContainer;
};

if (affLink.startDate && affLink.expirationDate) {
let countdown = createCountdown(affLink.startDate, affLink.expirationDate);
downtimeCell.appendChild(countdown);
}

osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
}
});
});
</script>

<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>

<head>
<meta http-equiv="Content-Type" content="text/html;">
<meta http-equiv="x-ua-compatible" content="">
<meta name="theme-color" content="#FFFFFF">
<style>
/* 适用于iPhone 15 Pro的样式其他机型可自行更改最大及最小宽度 */
@media only screen and (min-device-width: 375px) and (max-device-width: 1179px) {
/* 启动动画的样式 */
#loading-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff; /* 背景颜色 */
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* 防止图片超出视口 */
}

#loading-animation img {
width: 100vw; /* 图片宽度占满视口宽度 */
height: 100vh; /* 图片高度占满视口高度 */
object-fit: cover; /* 图片按比例填充并覆盖整个视口 */
animation: fadeInOut 3s ease-in-out infinite; /* 动画效果 */
}

/* 图片渐变的动画效果 */
@keyframes fadeInOut {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
}

/* 其他样式 */
body[theme]::before {
background-image: url(https://imgapi.cn/bing.php?rand=true); /* 替换为自己的背景图片链接 */
}

/* 字体设置 */
body[theme] {
font-family: "Consolas", Arial, Helvetica, sans-serif; /* 修改默认字体 */
}
</style>
</head>