JavaScriptで画面遷移する方法

tom244

8年前

今日もJavaScriptをガシガシ勉強中です。今回はJavaScriptで画面遷移する方法を紹介します！

今回の課題は、遷移ボタンをクリックすればグーグルのトップページに遷移するという仕様です。

書いたソースはこんな感じ。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScript　Training</title>
</head>
<body>
    <input id='btn'   type="submit" value='Change!!'  onclick="move()" />

    <style>
    #btn {
        height: 400px;
        width: 200px;
        padding:20px;
    }
    </style>
    <script type="text/javascript">

    function move (){
        var answer = confirm("準備はいいかい？");

        if(answer)window.location = "http://google.com";
    }

    setTimeout(move, 10000);

    </script>
    <noscript>Javascriptが利用できません。</noscript>
</body>
</html>

ボタンをクリックすれば、ファンクションが起動する仕組みです。

ちなみにクリックしなくても１０秒後に遷移するようにも実装しています。強制的にグーグルのトップページに移行しちゃいます。

window.location = "http://google.com";
setTimeout(moveon, 10000);

window.location と setTimeout( )に関して学びました〜