QA@IT
«回答へ戻る

回答を投稿

例えば、サイズが 800 x 800 の body 要素の中で、サイズが 400 x 300 の div 要素を、初期画面では top: 200px; left: 300px; の位置に表示し、[スタート]ボタンクリックで、body 要素の中で Math.random() を使ってランダムに動かす場合ですと、以下のようにすればできるはずです。

<html>
<head>
    <title>Nice</title>
    <style type="text/css">
        #pic{
            position: absolute;
            top: 200px;
            left: 300px;
            width: 400px;
            height: 300px;
            border: 2px solid black;
        }

        body {
            width: 800px;
            height: 800px;
            border: 1px solid blue;
        }
    </style>
    <script type="text/javascript">
        function move() {
            var get = document.getElementById("pic");
            var x = Math.floor(Math.random() * (document.body.clientWidth - get.clientWidth));
            var y = Math.floor(Math.random() * (document.body.clientHeight - get.clientHeight));
            get.style.top = y + "px";
            get.style.left = x + "px";
            timer = setTimeout("move()", 100);
        }
    </script>
</head>
<body>
    <div id="pic">
    </div>
    <form>    
        <input type="button" value="スタート" onclick="move()" />    
    </form>
</body>
</html>

上記で質問者さんの目的に適わない場合は、どこが問題かを書いていただければ、別の案を考えて見ます。

例えば、サイズが 800 x 800 の body 要素の中で、サイズが 400 x 300 の div 要素を、初期画面では top: 200px; left: 300px; の位置に表示し、[スタート]ボタンクリックで、body 要素の中で Math.random() を使ってランダムに動かす場合ですと、以下のようにすればできるはずです。

```
<html>
<head>
    <title>Nice</title>
    <style type="text/css">
        #pic{
            position: absolute;
            top: 200px;
            left: 300px;
            width: 400px;
            height: 300px;
            border: 2px solid black;
        }

        body {
            width: 800px;
            height: 800px;
            border: 1px solid blue;
        }
    </style>
    <script type="text/javascript">
        function move() {
            var get = document.getElementById("pic");
            var x = Math.floor(Math.random() * (document.body.clientWidth - get.clientWidth));
            var y = Math.floor(Math.random() * (document.body.clientHeight - get.clientHeight));
            get.style.top = y + "px";
            get.style.left = x + "px";
            timer = setTimeout("move()", 100);
        }
    </script>
</head>
<body>
    <div id="pic">
    </div>
    <form>    
        <input type="button" value="スタート" onclick="move()" />    
    </form>
</body>
</html>
```

上記で質問者さんの目的に適わない場合は、どこが問題かを書いていただければ、別の案を考えて見ます。