JavaScript的定时器与运动函数封装

目录

定时器

定时器分类 

定时器的设置

  延迟定时器

 延迟定时器的使用

间歇性定时器

 间歇性定时器使用（倒计时）

定时器的清除

清除延迟定时器

清除间歇性定时器

运动函数的封装

单方向匀速运动

反复匀速运动

 简单的封装

封装的完善

---

定时器

定时器分类 

• 延迟定时器：多长时间之后才执行一次 （只执行一次 ）

  • 应用场景：广告弹出

• 间歇性定时器：没隔多长时间就执行一次（只要不清除就一直执行）

  • 应用场景：轮播图，倒计时

延迟定时器：一般支持最小值4ms
间歇性定时器：一般支持最小毫秒值 10ms 

定时器的设置

  延迟定时器

• 基本语法：setTimeout(fun,time)

  • fun:函数，可以传递实名函数或匿名函数

  • time：时间，单位是ms（单位省略） 1s = 1000ms

  setTimeout(function(){
            console.log("哈哈哈");
        },3000);


        function test(){
            console.log("呵呵呵");
        }

        setTimeout(test,6000);

 延迟定时器的使用

 3秒显示图片，点击关闭按钮后关闭

  <div>
        <img src="./img/11.jpg" alt="">
        <span>X</span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var span = document.getElementsByTagName("span")[0];

        // 设置定时器
        setTimeout(function () {
            div.style.display = "block";
        }, 3000);

        span.onclick = function () {
            div.style.display = "none";
        }
    </script>

间歇性定时器

• 基本语法：setInterval(fun,time)

  • fun:函数，可以传递实名函数或匿名函数

  • time：时间，单位是ms（单位省略） 1s = 1000ms

 // 间歇性定时器
        // 传递匿名函数
        setInterval(function(){
            console.log("hello world");
        },1000);

        // 传递实名函数
        function test1(){
            console.log("哈喽");
        }
        setInterval(test1,3000);

 间歇性定时器使用（倒计时）

界面显示十秒倒计时 

  <span>10</span>
    <script>
        var span = document.getEl