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

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在Javascript中随机移动图像

2 个答案: