【JavaScript】5秒後に自動的に別ページへ画面遷移する

■実装するプログラムの概要

ユーザが任意のページに遷移した際、自動的に別ページへ遷移させる。
実装するプログラムの概要は以下の通り。

・HTMLの画面にてJavaScriptを実装する。

・任意のページを作成し、5秒後にホームページ（https://anotools.com）へ遷移させる。

▼画面遷移処理概要

JavaScriptの処理で画面遷移を行うのは、「location」オブジェクトの「href」プロパティを使用する。

location.href = "ここにURLを記載する";

▼5秒待つ処理の概要

JavaScriptの処理で5秒待つ処理は、「setTimeout」メソッドを使用する。
今回は、画面遷移処理を関数で実装し、5秒（5000ミリ秒）に起動するようにする。

let 変数名 = setTimeout(<関数名>, ミリ秒);

■フローチャート

■プログラム仕様

入力処理内容出力
–div要素（ID）を取得する。–
–取得したdiv要素から、HTMLへ文言を出力する。【HTML】
5秒後にホームページへ遷移します
–5秒後にホームページへ画面遷移する。
URL：https://anotools.com		–

■サンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>画面遷移</title>
</head>
<body>
    <!-- 入力設定 -->
    <div id="fnc_wait"></div>


    <!-- ここにjavascriptを実装する-->
    <script type="text/javascript">

        // ホームページに移動する処理
        function gotoHomepage(){
            location.href = 'https://anotools.com';
        }

        // div要素取得
        let div_element_wait = document.getElementById('fnc_wait');
        // 文言を画面に出力
        div_element_wait.innerHTML = "5秒後にホームページへ遷移します";

        // 5秒後に「ホームページに移動する処理」を呼び出す
        let wait_5sec = setTimeout(gotoHomepage, 5000);

    </script>
</body>
</html>

■実行結果

・画面起動時

・5秒後、ホームページへ自動遷移する。

コメント