js从菜鸟到精通08day-DOM定时器及js动画

最新推荐文章于 2024-10-09 20:10:15 发布

Mi Manchi卍.

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量52

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_63927136/article/details/132510975

版权

08-DOM定时器及js动画

1.1设置超时定时器

// setTimeout(callback,ms);
        // 回调函数 ： 在执行完一段代码之后 紧接着自动的去调用另一个函数 这个函数就是回调函数

        setTimeout(function () {
            console.log('三秒之后执行');
        }, 3000)
        setTimeout(function () {
            console.log('二秒之后执行');
        }, 2000)
        setTimeout(function () {
            console.log('一秒之后执行');
        }, 1000)

        console.log(123);
        // 在一段时间之后 调用一次 回调函数

        // 定时器 是异步的

1.2 清除超时定时器

<script>
        var box = document.getElementsByClassName("box")[0];
        // 清除超时定时器  两种方法
        // 1.将定时器保存给一个变量之后 这个变量存储的是 定时器的ID
        // setTimeout()

        var timer = setTimeout(function () {
            console.log("两秒之后执行");

            // 定时器可以在内部清除
            clearTimeout(timer);
        }, 2000)
        console.log(timer);

        var timer2 = setTimeout(function () {
            console.log("三秒之后执行");
        }, 3000)
        console.log(timer2);

        // clearTimeout();
        // 清除定时器 其实就是把定时器的id删除 这样就不会执行了
       

        // 为什么要清除定时器？
        // 因为定时器会浪费 浏览器性能，也可能造成内存的泄露 防止定时器叠加

        // 2.使用DOM对象来保存 定时器的ID
        box.timer3 = setTimeout(function () {
            console.log("一秒之后执行");
        },1000);
        console.dir(box)

        clearTimeout(box.timer3)
    </script>

1.3 设置间歇定时器

//间歇定时器 ： 每隔一段时间之后调用一次 回调函数
        // setInterval(callback,ms)

        // setInterval(function () { 
        //     console.log("一秒执行一次");
        // }, 1000)

        function getTime() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
            var d = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
            var h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
            var f = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
            var s = date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();

            box.innerHTML = `${y}年${m}月${d}日    ${h}时${f}分${s}秒`;
        }
        getTime()

        // 模板字符串
        // box.innerHTML = `${y}年${m}月${d}日    ${h}时${f}分${s}秒`;
        // y + "年" + m + "月" + d + "日" + h + "时" + f + "分" + s + "秒"

        var timer = setInterval(getTime, 1000)

        // clearInterval(定时器id);
        // clearInterval(timer)

1.4 清除间歇定时器

调用setInterval()方法同样会返回一个定时器的唯一标识（ID）。要取消间歇定时器，可以用clearInterval()方法并传入相应的ID值就行了。

clearInterval(intervalId);

2. JS动画

主要实现以下几种简单的动画效果（其实原理基本相同）：

1.匀速动画：物体的速度固定

2.缓动动画：物体速度逐渐变慢

2.1 匀速动画

（以物体左右匀速运动为例）

动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。
将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；
然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；
当物体到达目标位置时清除定时器；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }

        .content .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
        }
    </style>
</head>

<body>
    <button class="right">向右走</button>
    <button class="left">向左走</button>
    <div class="content">
        <div class="box"></div>
    </div>
    <script>

        // 匀速
        // 缓慢
        //- 动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。
        // - 将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；
        // - 然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；
        // - 当物体到达目标位置时清除定时器；

        // 匀速动画
        var _right = document.getElementsByClassName("right")[0];
        var _left = document.getElementsByClassName("left")[0];
        var box = document.getElementsByClassName("box")[0];
        var content = document.getElementsByClassName("content")[0];

        var timer;
        var speed = 10;
        _right.addEventListener("click", function () {
            clearInterval(timer);
            timer = setInterval(function () {
                if (box.offsetLeft >= content.offsetWidth - box.offsetWidth - content.clientLeft * 2) {
                    clearInterval(timer);
                    console.log(1);
                } else {
                    box.style.left = box.offsetLeft + speed + "px";
                }
            }, 20)
        })

        _left.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                if (box.offsetLeft <= 0) {
                    clearInterval(timer);
                    console.log(1);
                } else {
                    box.style.left = box.offsetLeft - speed + "px";
                }
            }, 20)
        }
    </script>
</body>

</html>

2.2 缓动动画

（和匀速运动相同原理，只不过速度做些改变）

让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；
二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }

        .content .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
        }
    </style>
</head>

<body>
    <button class="right">向右走</button>
    <button class="left">向左走</button>
    <div class="content">
        <div class="box"></div>
    </div>
    <script>
        // - 让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；
        // - 二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整；
        // 匀速动画
        var _right = document.getElementsByClassName("right")[0];
        var _left = document.getElementsByClassName("left")[0];
        var box = document.getElementsByClassName("box")[0];
        var content = document.getElementsByClassName("content")[0];

        var timerId;

        var moveMax = content.offsetWidth - (content.clientLeft * 2) - box.offsetWidth;
        _right.addEventListener("click", function () {
            clearInterval(timerId)
            if (box.offsetWidth == moveMax) {
                clearInterval(timerId)
            } else {
                timerId = setInterval(function () {
                    //    70        700            0            /10
                    //     63          700         70       /10
                    //     56.7        700             133
                    var speed = (moveMax - box.offsetLeft) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    box.style.left = box.offsetLeft + speed + "px";
                }, 40)
            }
        })

        _left.onclick = function () {
            clearInterval(timerId)
            if (box.offsetWidth == 0) {
                clearInterval(timerId)
            } else {
                timerId = setInterval(function () {
                    //    -70         0   -  700   /10
                    //    -63
                    //    -56.7
                    var speed = (0 - box.offsetLeft) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    box.style.left = box.offsetLeft + speed + "px";
                }, 40)
            }
        }
    </script>
</body>

</html>