动画函数添加回调函数

最新推荐文章于 2022-08-17 01:11:31 发布

贪吃ღ大魔王

最新推荐文章于 2022-08-17 01:11:31 发布

阅读量178

点赞数 2

分类专栏：个人心得文章标签： JavaScript 动画回调函数定时器 DOM操作

本文链接：https://blog.csdn.net/weixin_44070254/article/details/115638570

版权

个人心得专栏收录该内容

20 篇文章 1 订阅

订阅专栏

动画函数添加回调函数

动画函数添加回调函数的方法

具体代码列：

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="position: absolute;
top:50px;
left:0;
width:200px;
height: 200px;
background-color: skyblue"></div>
<script>

    // 回调函数原理:函数可以作为一个参数。将这个参数传到另一个函数里面，当那个函数执行完之后，
    再执行传进去的函数，这个过程叫做回调。

    function animate(obj,target,callback){
        obj.timer=setInterval(function (){
            if (obj.offsetLeft===target){
                clearInterval(obj.timer);
                //写到定时器结束里面，结束后执行这个函数；写在外面只能作为一个普通函数
                callback();
            }
            obj.style.left=obj.offsetLeft+10+'px';
        },50)
    }
    var div=document.querySelector('div');
    // 函数可以作为一个参数
    animate(div,300,function (){
        div.style.backgroundColor='pink';
    })
</script>
</body>
</html>

贪吃ღ大魔王

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
动画函数添加回调函数

动画函数添加回调函数动画函数添加回调函数的方法具体代码列： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div style="position: absolute;top:50px;left:0;width:200px;he
复制链接

扫一扫