如何在Javascript中在桌子周围随机移动图像
How to randomly move an image around a table in Javascript
我在表格的单元格中有一个图像,我希望它随机从一个单元格移动到另一个单元格。我计划使用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。
这样就可以了。
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>
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>
相关文章:
- D3.js强制布局:动态添加节点;t随图的其余部分移动
- 导入的JSON几何体不随骨骼移动
- 获取要随滑块值移动的滑块标签
- 如何在Javascript中在桌子周围随机移动图像
- fullPage.js滚动条:true使浏览器随deelay一起移动
- 在字符串的各个部分周围移动
- 如何在不移动 html 中周围元素的情况下扩展图像
- 在点击按钮时在谷歌地图周围移动
- 在不使用滚动条的情况下在巨大的 html 页面周围移动浏览器视图
- (HTML5 画布)填充样式 img 不会随我的地形路径移动
- DIV在页面加载时随计算机时间移动
- 元素周围的蛇形移动发光
- 随页面锚移动的Javascript/CSS箭头
- Poshy提示不随滚动元素移动
- 创建一个随页面滚动而移动的浮动小部件
- 如果在 DOM 周围移动,SVG 元素将丢失事件处理程序
- Div滑块未随鼠标移动而正确移动
- 工具提示随光标移动
- 如何使背景图像随光标移动?试图实现这个相互依赖
- 图像不随显示器显示而移动