HTML + JS 实现 网站已运行 x 年 x 天 x 分 x 秒

直入主题

首先咱先贴一下 JS 代码

Copy
function updateTime() {
var now = new Date(); // 当前时间
var start = new Date("2019-7-25"); // 开始时间
var diff = now - start; // 时间差

var years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365)); // 年
diff -= years * (1000 * 60 * 60 * 24 * 365);
var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 天
diff -= days * (1000 * 60 * 60 * 24);
var hours = Math.floor(diff / (1000 * 60 * 60)); // 小时
diff -= hours * (1000 * 60 * 60);
var minutes = Math.floor(diff / (1000 * 60)); // 分钟
diff -= minutes * (1000 * 60);
var seconds = Math.floor(diff / 1000); // 秒

var runtimeElement = document.getElementById("runtime"); // 通过 span 标签显示
runtimeElement.innerText = "已在风雨中度过 " + years + " 年 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
}

// 初始调用一次
updateTime();

// 每秒更新一次
setInterval(updateTime, 1000);

然后我们用 标签把以上代码放在页面你喜欢的地方
然后再用

Copy


将这段话插入到你想要的地方

效果预览

最佳实践

参考 https://github.com/BLxcwg666/BLxcwg666/blob/master/index.html#L260 (https://www.nekorua.com)
和 https://github.com/BLxcwg666/BLxcwg666/blob/xcnyacn/index.html#L240 (https://www.xcnya.cn)

此文由 Mix Space 同步更新至 xLog
原始链接为 https://blog.nekorua.com/posts/coding/119.html