Javascriptでテーブルの周りをランダムに画像を移動する方法

テーブルのセルに画像があり、ランダムに1つのセルから別のセルに移動したいのですが。私はランダムに周りに2秒ごとに画像を移動するためのsetIntervalとMath.random（）を使用して計画していたが、私はすべてのJavascriptでテーブルの周りをランダムに画像を移動する方法

<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を使うことはできません。

出典

2016-04-06 JackFF

あなたmoveImgRandomly機能を使用すると、そこに入れて試してみましたがどのようなコード、空のですか？ –

あなたはそれを計画しています。しかし、 'setInterval'と' Math.random（） 'のコードはどこにありますか？最初にそれを試してください –

イメージを選択し、別のセルに追加してください。 – epascarello

これはそれを行う必要があります。ここで

var img = document.getElementById("img"); 
 
var tds = document.getElementsByTagName("td"); 
 

 
setInterval(function(){ 
 
\t var randomNumber = Math.floor(Math.random() * tds.length); 
 
\t 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>

出典

2016-04-06 13:34:25 Robert

素晴らしいですが、 'var tds = document.getElementByTagName（ 'myTable'）。getElementsByTagName（" td "）;'を参照すると、件名テーブルのセルだけが取得されます。 ;-) – RobG

はいランダムな画像の変更の影響を受けないテーブルをさらに追加する場合は、これを変更する必要があります。ありがとうございました。 – Robert

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>

出典

2016-04-06 13:39:14 ehsan88

のjQueryを利用しない関数です。質問をしながら試したコードを共有してください。このようにすると、他人に助けを求めないように求めているように見えます。

function moveImgRandomly() { 
    var im = ""; 
    var cells; 
    var rows = document.getElementById("myTable").rows; 
    for (var i = 0; i < rows.length; i++) { 
    cells = document.getElementById("myTable").rows[0].cells; 
    for (var j = 0; j < cells.length; j++) { 
     if (cells[j].innerHTML.indexOf('img') != -1) { 
     im = cells[j].innerHTML; 
     cells[j].innerHTML = ""; 
     break 
     } 
    } 
    var newrow = parseInt(getRandomArbitrary(0, 2)); 
    var newcell = parseInt(getRandomArbitrary(0, 2)); 
    rows[newrow].cells[newcell].innerHTML = im; 
    console.log("Changed image cell"); 
    } 
    setInterval(moveImgRandomly, 6000); 
} 

setInterval(moveImgRandomly, 6000); 

function getRandomArbitrary(min, max) { 
    return Math.random() * (max - min) + min; 
}

Working Fiddle

出典

2016-04-06 13:39:40 Manish

Javascriptでテーブルの周りをランダムに画像を移動する方法

答えて

関連する問題