如何在Javascript中隨機移動圖像

Question

我在桌子的單元格中有一個圖像，我希望它隨機地從一個單元格移動到另一個單元格。 我打算使用setInterval和Math.random（）每隔兩秒隨機移動圖像，但我無法讓圖像四處移動

<html>
<head>
    <style>
        tr { width: 300px; height: 100px }
        td { width: 100px; height: 100px }
        img { width: 100px; height: 100px }
    </style>
        <script> 
            function moveImgRandomly()
            {


            }
        </script>
</head>
<body bgcolor="lightblue">
    <table border=1 id="myTable">
        <tr>
            <td></td>
            <td></td>
            <td><img src="http://graemehobbs93.files.wordpress.com/2012/01/ape-1.jpg" id="img"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

到目前為止，這是我的工作。 我一直在努力讓圖像移動，但事實並非如此。 我也不能使用jQuery。

Answer 1

這應該做到這一點。

 var img = document.getElementById("img"); var tds = document.getElementsByTagName("td"); setInterval(function(){ var randomNumber = Math.floor(Math.random() * tds.length); tds[randomNumber].appendChild(img); }, 2000);

 tr { width: 300px; height: 100px } td { width: 100px; height: 100px } img { width: 100px; height: 100px }

 <body bgcolor="lightblue"> <table border=1 id="myTable"> <tr> <td></td> <td></td> <td><img src="http://graemehobbs93.files.wordpress.com/2012/01/ape-1.jpg" id="img"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body>

Answer 2

 function clearAll(){ var elements = document.getElementsByTagName('td'); for (var i=0;i<elements.length;i++){ elements[i].innerHTML="<p></p>"; } } setInterval(function(){ clearAll(); var elements = document.getElementsByTagName('td'); var ind = Math.floor(Math.random() * elements.length); elements[ind].innerHTML ='<img src="http://www.online-image-editor.com/help/images/photo_border.png" >'; }, 3000);

 tr { height: 100px}; td { width: 100px; height: 100px; display:block; }; img { width: 100px; height: 100px; } td p { padding:100px; }

 <table border=1 id="myTable"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

如何在Javascript中隨機移動圖像

問題描述

2 個解決方案

解決方案1
3 已采納 2016-04-06 13:34:25

解決方案2
0 2016-04-06 13:39:14

如何在Javascript中隨機移動圖像

問題描述

2 個解決方案

解決方案1 3 已采納 2016-04-06 13:34:25

解決方案2 0 2016-04-06 13:39:14

解決方案1
3 已采納 2016-04-06 13:34:25

解決方案2
0 2016-04-06 13:39:14