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以下になったらインターバルをクリアし、トップページにリダイレクトします。