WordPress在网站底部添加计时小组件

引言

今天，我们将介绍如何在网站底部添加一个动态的“本站已经运行了136天19小时28分19秒”的字样。这个功能不仅能为网站增添趣味性，还能向用户展示网站的稳定性和持续运行的时间。通过简单的代码实现，你将能够轻松地让这个信息在网站底部实时更新，从而为访客带来更加丰富的互动体验。接下来，让我们一起探索如何实现这一功能吧！

这个小功能使用了HTML代码和JS代码来实现，所以理论上不只适用于WordPress。

代码部分

在你想要显示运行时间的位置插入以下HTML代码：

<i class="fa fa-cog faa-spin animated"></i><span id="runtime_span"></span>

然后在合适的位置引入以下js代码：

<script>
function show_runtime(){window.setTimeout("show_runtime()",1000);X=new
Date("11/29/2024 15:22:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML=" 本站已经运行了"+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>

条件允许的话可以把两段代码拼起来写在同一个地方。如果你正在使用Sakurairo主题，按下图方式填写即可：

注意事项

为了能再前面展示可动的齿轮图标，你需要额外引入Font Awesome的css样式

示例代码：

<link rel="stylesheet" href="/path/to/your/font-awesome-animation.min.css">
<link rel="stylesheet" href="/path/to/your/all.min.css" type="text/css">

效果展示

本站已经运行了X天X小时X分X秒

具体时间则会根据你写到Javascript中的建站时间自动计算，此处仅展示外观效果。