點名系統(tǒng)

var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
var timer = null;
var arr = ['張三','李四','王五','劉二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        var randomNum = parseInt(Math.random() * arr.length);
        oh1.innerHTML = arr[randomNum];
    },10);
};
btns[1].onclick = function () {
    clearInterval(timer);
}

重點: var randomNum = parseInt(Math.random() * arr.length);乘以數(shù)組的長度再用parseInt確保可以取到數(shù)組里的每一個數(shù).

勻速動畫

var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var timer = null;
    var begin = 0;
    var target = 800;
    var speed = 4;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            begin += speed;
            if (begin >= target) {
                clearInterval(timer);
                begin = target;
            }
            box.style.left = begin + "px";
        }, 10)
    }

緩速動畫

    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var timer = null;
    var start = 0;
    var end = 800;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            start += Math.ceil((end - start ) / 15);
            console.log(start);
            if(start>=end){
                start = end;
                clearInterval(timer);
            }
            box.style.left = start + "px";
        }, 50)
    }

重點:start += Math.ceil((end - start ) / 15);其中15是系數(shù),越小動的越快

長圖展示

 var pic = document.getElementById("pic");
    var spans = document.getElementsByTagName("span");
    var timer = null;
    var speed = 10;
    var topMargin = 0;
    var target = -400;
    spans[0].onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topMargin += speed;
            if (topMargin >= 0) {
                clearInterval(timer);
                topMargin = 0;
            }
            pic.style.top = topMargin + "px";
        }, 10)
    }
    spans[1].onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topMargin -= speed;
            if (topMargin <= target) {
                clearInterval(timer);
                topMargin = target;
            }
            pic.style.top = topMargin + "px";
        }, 10)
    }

陰影展示

var box = document.getElementById("box");
    var cover = document.getElementById("cover");
    var timer = null;
    var topSize = 200;
    box.onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topSize -= 4;
            if(topSize<=0){
                clearInterval(timer);
                topSize = 0;
            }
            cover.style.top = topSize + "px";
        },10);
    }

頁面跳轉(zhuǎn)+遞歸函數(shù)

    var oh6 = document.getElementById("oh6");
    var count = 5;
    var timer = setTimeout(function () {
        clearTimeout(timer);
        count--;
        if (count < 1) {
            window.location.;
        }
        else {
            oh6.innerHTML = count + "秒以后跳轉(zhuǎn)到指定頁面";
        }
        timer = setTimeout(arguments.callee, 1000);
    }, 1000)

重點:window.location.;:跳轉(zhuǎn)目標地址.arguments.callee:在匿名函數(shù)內(nèi)部找到函數(shù)本身,調(diào)用自己,簡稱遞歸,一次定時器的多次使用

線程:用來執(zhí)行任務
隊列:先進先出

高級輪播圖

var spans = document.getElementsByTagName("span");
    var pic = document.getElementById("pic");
    var timer = null;
    var beginLeft = 0;
    var loop = 0;
    var speed = 4;
    var flag = false;
    spans[1].onclick = function () {
        if (flag == true) {
            return;
        }
        flag = true;
        clearInterval(timer);
        loop++;
        if (loop > 5) {
            loop = 1;
            beginLeft = 0;
        }
        timer = setInterval(function () {
            beginLeft -= speed;
            if (beginLeft <= -600 * loop) {
                clearInterval(timer);
                beginLeft = -600 * loop;
                flag = false;
            }
            pic.style.left = beginLeft + "px";
        }, 10)
    }
    spans[0].onclick = function () {
        if (flag == true) {
            return;
        }
        flag = true;
        clearInterval(timer);
        loop--;
        if (loop < 1) {
            loop = 4;
            beginLeft = -600 * 5;
        }
        timer = setInterval(function () {
            beginLeft += speed;
            if (beginLeft >= -600 * loop) {
                clearInterval(timer);
                beginLeft = -600 * loop;
                flag = false;
            }
            pic.style.left = beginLeft + "px";
        }, 10)
    }

重點:

1. cursor: pointer;:一個css屬性,設置鼠標放上變?yōu)樾∈?
2. return的應用:設置一個標記,規(guī)定再圖片過渡時點擊span無效,賦給標記一個false,if判斷當標記為true時,return,不執(zhí)行后面的代碼.第一次點擊span時,值為false,if后面賦給標記一個true,執(zhí)行定時器.再次點擊span時,標記的值為true,return,不執(zhí)行后面的代碼.定時器自動運行,當達到條件,圖片過渡完成到位時,返回給標記一個false,用于再次點擊.

獲取驗證碼

var btn = document.getElementById("btn");
    var timer = null;
    var num = 5;
    btn.onclick = function () {
        btn.disabled = true;
        timer = setInterval(function () {
            var dom = num--;
            if (dom < 1) {
                btn.disabled = false;
                btn.innerHTML = "重新獲取驗證碼";
                num = 5;
                clearInterval(timer);
            }
            else {
                btn.innerHTML = dom + "秒后重新獲取驗證碼";
            }
        }, 1000)
    }

重點:

1. btn.disabled = false;設置按鈕不可點擊,設置這個時就不用再設置清空定時器
2. 定時器里的調(diào)用對象是window,所以在定時器里不能用this指向調(diào)用對象,如果要用就寫備份指針var that = this;,再寫that.innerHTML.
   棧區(qū):存放指針
   堆區(qū):存放數(shù)據(jù)