JavaScriptを使用して、10秒間のカウントダウン後に自動的にトップページへリダイレクトする方法を紹介します。

この処理は、例えば404 Not Foundエラーページなどで利用すると効果的です。

HTMLコード

まず、HTMLではカウントダウンタイマーの残り時間を表示する部分を設置します。以下のように書きます。

<p><span id="countdown">10</span>秒後に自動的にトップページに移動します。</p>

JavaScriptコード

次に、JavaScriptを使用してカウントダウン機能を実装します。
以下のスクリプトをページの末尾に配置します。

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        let seconds = 10;
        const countdownElement = document.getElementById('countdown');

        const intervalId = setInterval(function () {
            countdownElement.textContent = seconds;
            if (seconds <= 0) {
                clearInterval(intervalId);
                window.location.href = "/";
            }
            seconds--;
        }, 1000);
    });
</script>

このスクリプトでは、DOMContentLoaded イベントが発生した後、カウントダウンを開始します。

各秒ごとにカウントダウン要素のテキストを更新し、秒数が0以下になったらインターバルをクリアし、トップページにリダイレクトします。