直入主題#
首先我們先貼一下 JS 代碼
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);
然後我們用 <script> 標籤把以上代碼放在頁面你喜歡的地方
然後再用
<span id="runtime"></span>
將這段話插入到你想要的地方
效果預覽#
最佳實踐#
參考 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