API之定时器

window.setInterval(函数,时间）;
- 函数
- 时间----毫秒
- 执行过程：页面加载完毕后，过设定的时间，就会执行一次函数代码，一直重复
window.setTimeout(函数，时间)；
- 函数
- 时间----毫秒
- 执行过程：页面加载完毕后，只重复一次函数代码，然后不再执行，所以叫一次性定时器

清理定时器的两种方法

因为定时器函数有返回照顾，所以清理定时器就清理定时器的的返回值就ok

clearinterval(timeId)
clearTimeout(timeId)

案例1之div的渐变

<body>
    <div id="box"></div>
    <input type="button" value="点我渐变" id="btn">

    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            //设置透明度为10
            var opacity = 10;
            var timeId = setInterval(function(){
              opacity--;
              if (opacity < 0 ) {
                  clearInterval(timeId);//清理定时器
                  return;
              } 
                  var box = document.getElementById('box');
                  //设置div的透明度，（透明度的取值范围为0-1）
                  box.style.opacity = opacity / 10;
    
            }, 200);
        }
    </script>
</body>

案例2之div变宽

 <body>
    <div id="box"></div>
    <input type="button" value="点我变宽" id = 'btn'>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var width = 300;
            var timeId = setInterval (function() {
                width = width + 10;
                if(width > 800) {
                    clearInterval(timeId);
                    return;
                }
                var box = document.getElementById('box');
                box.style.width = width + 'px';
            },200);
        }
    </script>
</body>

目录

创建定时器的两种方法

清理定时器的两种方法

一些关于定时器的小案例

猜你喜欢