HTML + JSでウェブサイトを運営しています。x年x日x分x秒経過しました。

直接のテーマ#

まず、以下の 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();

// 1秒ごとに更新
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 です。