4.13 JS04

点名系统

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);乘以数组的长度再用parseInt确保可以取到数组里的每一个数.

匀速动画

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是系数,越小动的越快

长图展示

 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);
    }

页面跳转+递归函数

    var oh6 = document.getElementById("oh6");
    var count = 5;
    var timer = setTimeout(function () {
        clearTimeout(timer);
        count--;
        if (count < 1) {
            window.location.href = "http://www.baidu.com";
        }
        else {
            oh6.innerHTML = count + "秒以后跳转到指定页面";
        }
        timer = setTimeout(arguments.callee, 1000);
    }, 1000)

重点:window.location.href = "http://www.baidu.com";:跳转目标地址.arguments.callee:在匿名函数内部找到函数本身,调用自己,简称递归,一次定时器的多次使用

线程:用来执行任务
队列:先进先出

高级轮播图

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属性,设置鼠标放上变为小手.
2. return的应用:设置一个标记,规定再图片过渡时点击span无效,赋给标记一个false,if判断当标记为true时,return,不执行后面的代码.第一次点击span时,值为false,if后面赋给标记一个true,执行定时器.再次点击span时,标记的值为true,return,不执行后面的代码.定时器自动运行,当达到条件,图片过渡完成到位时,返回给标记一个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. 定时器里的调用对象是window,所以在定时器里不能用this指向调用对象,如果要用就写备份指针var that = this;,再写that.innerHTML.
   栈区:存放指针
   堆区:存放数据