API之定時器

時間 2019-11-18

標籤 api 定時器简体版

原文原文鏈接

window.setInterval(函數,時間）;
- 函數
- 時間----毫秒
- 執行過程：頁面加載完畢後，過設定的時間，就會執行一次函數代碼，一直重複
window.setTimeout(函數，時間)；
- 函數
- 時間----毫秒
- 執行過程：頁面加載完畢後，只重複一次函數代碼，而後再也不執行，因此叫一次性定時器

清理定時器的兩種方法code

由於定時器函數有返回照顧，因此清理定時器就清理定時器的的返回值就okip

clearinterval(timeId)
clearTimeout(timeId)

案例1之div的漸變ci

<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變寬get

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