经常能在别人的博客下面看到这样的计时器：
该如何在自己的博客加入？
方法一：通过WordPress后台的“自定义代码添加”功能
1.进入WordPress后台，点击“外观” → “自定义”。
2.选择“额外的CSS”选项，并添加自定义JavaScript。
虽然这个位置通常用于CSS，但我们可以通过嵌入HTML <script> 标签的方式来添加JavaScript代码。下面是需要添加的代码：
<script>
function siteUptime() {
var siteStartTime = new Date("2023-01-01T00:00:00Z"); // 将此时间改为网站上线时间
var now = new Date();
var diff = Math.floor((now - siteStartTime) / 1000);
var days = Math.floor(diff / (3600 * 24));
diff -= days * 3600 * 24;
var hours = Math.floor(diff / 3600);
diff -= hours * 3600;
var minutes = Math.floor(diff / 60);
var seconds = diff % 60;
return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.createElement("div");
footerElement.id = "uptime";
footerElement.style.textAlign = "center";
footerElement.style.marginTop = "20px";
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
document.body.appendChild(footerElement);
setInterval(function() {
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
}, 1000);
});
</script>
3.保存设置，刷新网站后将会在页面底部看到“网站已稳定运行”的时间动态更新显示。
注意：使用这种方法时，WordPress默认不会直接支持在“额外的CSS”中添加JavaScript代码。因此你需要将这个JavaScript代码直接放到网站页脚的自定义HTML部分中（通常在“自定义”页面中的“小工具”或其他HTML代码块中）。
方法二：直接编辑主题的footer.php文件
1.进入“外观” → “主题文件编辑器”。
2.选择footer.php文件。
3.添加代码。要找到</body>标签前，添加以下代码：
<script>
function siteUptime() {
var siteStartTime = new Date("2023-01-01T00:00:00Z"); // 将此时间改为网站上线时间
var now = new Date();
var diff = Math.floor((now - siteStartTime) / 1000);
var days = Math.floor(diff / (3600 * 24));
diff -= days * 3600 * 24;
var hours = Math.floor(diff / 3600);
diff -= hours * 3600;
var minutes = Math.floor(diff / 60);
var seconds = diff % 60;
return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.createElement("div");
footerElement.id = "uptime";
footerElement.style.textAlign = "center";
footerElement.style.marginTop = "20px";
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
document.body.appendChild(footerElement);
setInterval(function() {
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
}, 1000);
});
</script>4.刷新页面。
相关美化教程
如果你觉得这样太单调了，可以试着改变相关颜色。如我的页脚的显示时间为樱花色。
就可以尝试下面的代码。
<script>
function siteUptime() {
var siteStartTime = new Date("2023-01-01T00:00:00Z"); // 将此时间改为网站上线时间
var now = new Date();
var diff = Math.floor((now - siteStartTime) / 1000);
var days = Math.floor(diff / (3600 * 24));
diff -= days * 3600 * 24;
var hours = Math.floor(diff / 3600);
diff -= hours * 3600;
var minutes = Math.floor(diff / 60);
var seconds = diff % 60;
return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.createElement("div");
footerElement.id = "uptime";
footerElement.style.textAlign = "center";
footerElement.style.marginTop = "20px";
footerElement.style.color = "#ffb7c5"; // 这里默认是樱花色，可以改成你想要的颜色，去网上找一找HTML Color Picker然后拉一拉自己喜欢的颜色。
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
document.body.appendChild(footerElement);
setInterval(function() {
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
}, 1000);
});
</script>一些供参考的颜色：
樱花色 - #FFB7C5：温暖柔和的粉红色
天空蓝 - #87CEEB：明亮清爽的浅蓝色
柠檬黄 - #FFF44F：明亮鲜艳的黄色
薰衣草紫 - #E6E6FA：淡雅的紫色
薄荷绿 - #98FF98：清新的浅绿色
珊瑚红 - #FF6F61：活力四射的橙红色
米色 - #F5F5DC：柔和温暖的淡黄色
墨绿色 - #006400：深沉浓郁的深绿色
宝石蓝 - #4169E1：浓郁明亮的蓝色
石墨灰 - #708090：柔和的中性灰色
金色 - #FFD700：闪耀的金黄色
橄榄绿 - #808000：浓厚的黄色绿色
鲑鱼红 - #FA8072：柔和温暖的橙粉色
玫瑰红 - #FF007F：浓艳的玫瑰色
海军蓝 - #000080：深沉而经典的蓝色
象牙白 - #FFFFF0：优雅柔和的浅白色
青绿色 - #40E0D0：清新的绿色带有一点蓝
酒红色 - #800000：深沉而浓烈的红色
浅珊瑚橙 - #F08080：温暖的浅橙色
古铜色 - #B87333：带有金属感的橙褐色
如果你觉得排版不够美观，例如计时器所处位置有些问题，可以通过修改footerElement.style.marginTop来进行调整。
还可以自行加一些特效。特技
<script>
function siteUptime() {
var siteStartTime = new Date("2023-01-01T00:00:00Z"); // 将此时间改为网站上线时间
var now = new Date();
var diff = Math.floor((now - siteStartTime) / 1000);
var days = Math.floor(diff / (3600 * 24));
diff -= days * 3600 * 24;
var hours = Math.floor(diff / 3600);
diff -= hours * 3600;
var minutes = Math.floor(diff / 60);
var seconds = diff % 60;
return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.createElement("div");
footerElement.id = "uptime";
footerElement.style.textAlign = "center"; // 文本居中
footerElement.style.marginTop = "20px"; // 顶部外边距
footerElement.style.color = "#ffb7c5"; // 樱花色字体
footerElement.style.fontFamily = "Arial, sans-serif"; // 字体类型
footerElement.style.fontSize = "18px"; // 字体大小
footerElement.style.fontWeight = "bold"; // 加粗
footerElement.style.backgroundColor = "#f0f0f0"; // 背景颜色
footerElement.style.padding = "10px"; // 内边距
footerElement.style.border = "2px solid #ffb7c5"; // 边框颜色
footerElement.style.borderRadius = "10px"; // 圆角边框
footerElement.style.boxShadow = "0px 4px 6px rgba(0, 0, 0, 0.1)"; // 阴影效果
footerElement.style.transition = "all 0.3s ease"; // 过渡动画
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
document.body.appendChild(footerElement);
setInterval(function() {
footerElement.innerHTML = "网站已稳定运行：" + siteUptime();
}, 1000);
});
</script>
上面的这些footerElement.style就按照自己想要的加就行了。可以复制全部代码然后自行删除不想要的特效。
Comments NOTHING