API之定时器

迈不过友情╰ 2021-11-29 10:34 315阅读 0赞

## 目录 ##

### 创建定时器的两种方法 ###

### 清理定时器的两种方法 ###

### 一些关于定时器的小案例 ###

> 创建定时器的两种方法(都有返回值timeId)

*  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>

转载于:https://www.cnblogs.com/1020-jj/p/11040473.html