四、定时器

• 设置定时器：每隔一段时间，定时器（函数）会自动执行一次。

  • setInterval()：

    • 第一个参数：函数

    • 第二个参数：间隔时间，单位是ms (1s=1000ms)，省略不写

    • 调用对象：window，省略不写

    • 一般我们习惯将设置定时器赋值给timer变量。

• 清除定时器：

  • clearInterval()：

    • 参数：只需要书写要清除定时器的名称

<div class="box" id="box">盒子</div>

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color:lightblue;
    }
</style>

<script>
    // 获取元素
    var oBox = document.getElementById("box");
    // 信号量
    var nowWidth = 200;
    // 每隔一段时间盒子变长
    var timer = setInterval(function(){
        // 信号量改变
        nowWidth += 20;
        // 信号量验证
        if(nowWidth >= 400){
            nowWidth = 400;
            // 超过400，清除定时器
            clearInterval(timer);
        }
        console.log(nowWidth);
        // 体现在元素身上
        oBox.style.width = nowWidth + "px";
    },1000);
    // 鼠标进入盒子，停止定时
    oBox.onmouseenter = function(){
        console.log(nowWidth);
        // 清除定时器
        clearInterval(timer);
    }
    // 鼠标离开盒子，继续变长
    oBox.onmouseleave = function(){
        // 设表先关
        // 重新开启定时器，需要先关闭之前的定时器，然后重新赋值
        clearInterval(timer);
        timer = setInterval(function () {
            // 信号量改变
            nowWidth += 20;
            // 信号量验证
            if (nowWidth >= 400) {
                nowWidth = 400;
                // 拉终停表，达到终点关闭定时器
                clearInterval(timer);
            }
            console.log(nowWidth);
            // 体现在元素身上
            oBox.style.width = nowWidth + "px";
        }, 1000);
    }
</script>