js怎么移动盒子setInterval
时间: 2024-05-14 09:11:12 浏览: 68
js实现盒子移动动画效果
在JS中,可以使用setInterval函数来实现盒子的移动。setInterval() 方法会按照指定的周期(以毫秒计)来调用函数或计算表达式。
下面是一个简单的例子,通过改变盒子的left属性值来移动盒子:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var left = 50;
setInterval(function() {
left++;
box.style.left = left + 'px';
}, 10);
</script>
</body>
</html>
```
上述代码中,我们首先获取了一个id为"box"的元素,然后设置了一个变量left来记录盒子的位置。在setInterval()函数中,我们每隔10毫秒将left加1,并将其赋值给盒子的left属性,从而实现了盒子的移动。
阅读全文