WebAPI——定时器与offset家族

本文链接：https://blog.csdn.net/weixin_44757417/article/details/107620683

定时器setInterval

每隔一段时间执行某个操作一次

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数
执行无数次，直到停止计时器或关闭页面
语法：

let timerID = setInterval( 被执行的函数 ，间隔毫秒数 )

声明
- 1.匿名函数的方式

setInterval(
	function () {
	   console.log('去哪');

    }, 1000
    // 1000是毫秒，也就是1秒钟
            )

2.利用封装函数的方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="love">你爱我吗？</button>
    <script>
        // 定时器：每隔一段时间执行某个操作一次：闹钟

        let loveBtn = document.getElementById('love');
        let timeID;
        loveBtn.onclick = function () {
            // 声明定时器
            // 1.利用匿名函数的方式来声明
            setInterval(
                function () {
                    console.log('去哪');

                }, 1000
                // 1000是毫秒，也就是1秒钟
            )
            // 2.利用封装函数的方法
            // timeID 是定时器的编码
            // 如果不想定时器加速，匿名每次设置定时器之前，先清空定时器编码
            clearInterval(timeID);
            timeID = setInterval(love, 1000);
        }

        function love() {
            alert('弹出');

        }
    </script>
</body>

</html>

timeID:就是启动计算器的id
启动：let 定时器id = setTimeout( 被执行的函数，倒数毫秒数 )
clearInterval(timeID)：关闭定时器

倒计时计时器setTimeout

<body>
    <button id="boom">
        开始
    </button>
    <div>60</div>
    <script>
        let boom = document.getElementById('boom');
        let timeID;
        let time = document.getElementsByTagName('div')[0];
        let index = 60;
        boom.onclick = function () {
            // 1.用匿名函数
            // timeID =setTimeout(
            //     function(){
            //         console.log('爆炸');

            //     },3000
            // )
            clearTimeout(timeID);
            timeID = setTimeout(boomEgg, 60000);
            time.innerHTML = index;
        }

        function boomEgg() {
            console.log('炸');
            index--;
        }
    </script>
</body>

offset家族

style.height 和 style.width 获取的是 行内样式表中的宽和高，行内没有获得的是undefined
真实的宽度和高度 offsetHeigth/offsetWidth
- offsetHeigth = heigth + pading * 2 + border * 2
- offsetWidth = width + pading * 2 + border * 2
真实的 left 和 top ：offsetLeft / offsetTop

元素左上角原点距离父容器左上角原点的真实距离
定位父元素 offsetParent
获取的是最近的定位父元素
特点：
- 不带单位
- 数值类型
- 只能读取，不能修改 – 如果要修改就用行内样式表修改 dom.style

案例：

<!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>
        #box {
            width: 120px;
            height: 120px;
            background-color: red;
            position: absolute;
            left: 10px;
        }


      
    </style>
</head>

<body>
    <button id="to400">到400位置</button>
    <button id="to800">到800位置</button>
    <button id="to0">到0</button>
    <hr>
    <div id="box"></div>
    

    <script>
        // 1.获得需要的元素
        let to400 = document.getElementById('to400');
        let to800 = document.getElementById('to800');
        let box = document.getElementById('box');
        let to0 = document.getElementById('to0');

        to0.onclick = function () {
            moveAnimation(box, 0);
        }
        to400.onclick = function () {
            moveAnimation(box, 400);
        }
        to800.onclick = function () {
            moveAnimation(box, 800);

        }

        // 2.封装动画函数
        function moveAnimation(elm, target) {
            // 3.清空定时器
            clearInterval(elm.timeID);
            // 4.获得当前元素的位置
            let elmLeft = elm.offsetLeft;
            // 5.设置步长
            // 如果是往右走，那么步长为正数
            // 如果是往左走，那么步长为负数
            // 还没有到终点，那就继续走，就是正数
            // 如果已经超过终点，那就需要回头，就是负数
            // 目标     当前
            // target - elmLeft > 0,代表你还没到终点，继续走，正数
            // target - elmLeft < 0，代表你已经超过终点，往回走，负数
            let step = (target - elmLeft) > 0 ? 2 : -2;

            // 6.设置定时器
            elm.timeID = setInterval(function () {
                elmLeft += step;
                // 7.判断盒子需不需要继续移动
                // 如果剩余距离大于步长，那么继续走
                // 如果剩余距离小于步长，那么写死终点，并停止定时器
                // 剩余距离：目标：-当前-->Math.abs(step)(target-elmLeft)
                if (Math.abs(target - elmLeft) > Math.abs(step)) {
                    elm.style.left = elmLeft + 'px';
                } else {
                    // 如果剩余距离小于步长，那么写死终点，并停止定时器
                    elm.style.left = target + 'px';
                    clearInterval(elm.timeID);
                }
            }, 5);
        }
    </script>
</body>

</html>

在这里插入图片描述