用setInterval方法
时间: 2023-12-22 08:44:10 浏览: 76
在vue中使用setInterval的方法示例
如果你想使用`setInterval`方法来实现动画效果,可以按照以下示例代码进行编写:
HTML:
```html
<div id="myDiv"></div>
```
CSS:
```css
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
```
JavaScript:
```javascript
function moveDiv() {
var div = document.getElementById("myDiv");
var position = 0;
var intervalId = setInterval(frame, 16); // 每16毫秒执行一次帧
function frame() {
if (position >= 500) {
clearInterval(intervalId);
} else {
position += 5; // 每一帧移动的距离
div.style.left = position + 'px';
}
}
}
moveDiv();
```
这段代码使用了`setInterval`方法来定时执行`frame`函数,每隔16毫秒(约60帧每秒)执行一次。在`frame`函数中,通过递增`position`的值来实现div的平滑移动,并将新的位置应用到div的`left`样式上。当div达到目标位置(500px)时,使用`clearInterval`方法停止定时器。
通过调用`moveDiv`函数,可以触发div的动画效果,使其从左向右移动500px的距离。请注意,使用`setInterval`方法实现的动画效果可能不如使用`requestAnimationFrame`方法平滑,因为`setInterval`是固定的时间间隔执行,而`requestAnimationFrame`会根据浏览器的刷新率来执行,以获得更平滑的动画效果。
阅读全文