JS HTML DOM ---DOM 动画（JS定时器setInterval）

最新推荐文章于 2024-04-17 14:09:20 发布

望望byte

最新推荐文章于 2024-04-17 14:09:20 发布

阅读量336

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript css

原文链接：https://www.w3school.com.cn/js/js_htmldom_animate.asp

版权

JavaScript学习笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

文章目录

JS HTML DOM 动画
JS定时器
- 开启定时器 setInterval()
- 关闭定时器 clearInterval()

JS HTML DOM 动画

使用JS 来创建 HTML 动画

基础页面

实例：
为了演示如何通过 JavaScript 来*创建 HTML 动画，*我们将使用一张简单的网页：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一部 JavaScript 动画</h1>

<div id="animation">我的动画在这里。</div>

</body>
</html>

创建动画容器

所有动画都应该与容器元素关联。

实例：

/*创建动画容器*/
<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute" 创建动画元素。

实例

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h1>我的第一个 JavaScript 动画</h1>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>

在这里插入图片描述

动画代码

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

实例：
基础代码是：

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

使用JS 创建动画

实例

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

JS定时器

开启定时器 setInterval()

作用：

定时调用
将一个函数或表达式，每隔一段时间执行一次
语法：

setInteval(code, millisec[, "lang"])

参数：

code : 回调函数，每隔一段时间被执行一次
millisec: 调用函数的时间间隔，单位：毫秒
返回值：
返回一个Number类型的数据，（这个数值用作定时器的唯一标识）
实例：

//开启定时
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }

关闭定时器 clearInterval()

作用：
关闭定时
语法：

clearInterval(intervalID)

参数：

定时器的标识，关闭相应的定时器
实例：

    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
        //关闭定时
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }