定時器的認識

• 定時器：就是可以不斷地自動的重復某一個操作的東西。
• 定時的分類：
  • 1.多次定時器：setInterval（）
  • 2.一次定時器：setTimeout（）
  • 第一個參數：表示執行的操作，一般就是事件指令
  • 第二個參數表示間隔的時間，但是注意這個時間是毫秒 1s = 1000ms；
• 定時器的特點：
  對于一般的變量以及函數當使用完成后，系統會自動回收對應的內存，但是定時器當使用完成后系統不會自動回收對應的內存，所以我們需要手動回收。
• 清空定時器：clearTimeout（）
  因為清空定時器的時候，我們不知道是哪一個，但是一個頁面中可能有多個定時器，所以我們一般在設置定時器的時候，給定時器制定名稱,清空的時候直接清空對應名稱的定時器就可以。

定時器的勻速動畫

• 動畫原理：就是讓實現動畫的標簽距離某個方向的位置不斷地變化，可以通過多次定時器實現不斷地變化

  window.onload = function () {
 1.1獲取標簽
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        
        var timer = null;
//        var begin = 0;//用來記錄距離左邊的間距
//        var target = 800;//用來記錄動畫的目標值
2.點擊按鈕
        btn.onclick = function () {
2.3調用下面抽取的勻速動畫
            constant(0,40,800);
        }
抽取勻速動畫
        function constant(begin,speed,target) {
定時器會疊加，如果我們上次沒有清空，當點擊按鈕的時候，會再次創建一個新的定時器和原來的定時器疊加所以會越來越快，所以我們需要在點擊的時候，清空上一次定時器
            clearInterval(timer);
2.1實現動畫,使用定時器
            timer = setInterval(function () {
                begin += speed;
2.11判斷終止值
                if(begin >= target){
                    clearInterval(timer);
                    begin = target;
                }
2.2設置距離左邊的間距
                box.style.left = begin + 'px';
            },10)
        }
    }

定時器的減速動畫

 window.onload = function () {
1.獲取標簽
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        var timer = null;
        var begin = 0;//用來記錄距離左邊的間距
        var target = 800;//用來記錄動畫的目標值
2.點擊按鈕
        btn.onclick = function () {
2.1清空定時器
            clearInterval(timer);
            timer = setInterval(function () {
 //ceil：向上取整，如果是1.1，取出來的是2
//計算出速度
                var speed = Math.ceil((target - begin)*0.2);
 //我們的速度需要向上取整
                begin += speed;
                if (begin >= target){
                    clearInterval(timer);
                    begin = target;
                }
2.2設置距離
                box.style.left = begin + 'px';
            },100)
        }
    }

一次定時器執行多次操作

 window.onload  = function () {
        // 就是使用一次定時器執行多次操作
        var timer = null;
        var count = 5;//用來記錄秒數
        var box = document.getElementById('box')
        timer = setTimeout(jumpPage,1000);
        //用來執行定時器的操作的函數
        function jumpPage() {
            clearInterval(timer);
            box.innerHTML = '要在'+count+'秒后跳轉'
            count --;
            if(count >= 0){
                timer = setInterval(arguments.callee,1000);
                //函數中調用函數自己，叫做遞歸函數
                //arguments.callee:相當自己本身。

            }else {//小于0,跳轉,清空最后一次定時器
                window.location.;
                clearInterval(timer);
            }
        }
    }

隨機數

• Math.random():可以隨機生成一個大于等于0但是需要小于1的數字，不能等于1

使用Js設置值

• 獲取box的樣式
• 如果直接設置我們獲取的是行內樣式的值,但是有時候我們需要獲取在頁內設置的值。
• 在不同的瀏覽器使用不同的方法獲取：
• 如果是ie或者opera：

• 如果是普通的瀏覽器：

• 綜合寫法一般是:

function getCssAttr(obj,attr) {
          if(obj.currentStyle){
              return obj.currentStyle[attr];
          }else {
              return window.getComputedStyle(obj,null)[attr];
          }
      }
   如果當我們使用.語法訪問不到值,我們可以采用[]來訪問.
        alert(getCssAttr(box,'width'));
    }

簡單的無限輪播

  window.onload = function () {
        //1.獲取標簽
        var oul = document.getElementById('oul');
        //2.設置距離左邊的間距不斷變化，需要時定時器
        var timer = null;
        var begin = 0;//設置距離左邊的間距
        timer = setInterval(setLeft,20);
        function  setLeft() {
            begin -= 4;
            if(begin <= -1200){
                begin = 0;
            }
            oul.style.left = begin + 'px';
        }
    }