js基础第四天

01.设置字符翻转以及移动到不同行上显示不同的颜色

!important 提升优先级

02.九宫格算法的分析

4256-106.jpg

01.点名册案例

// 1.获取标签
var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
// 2.添加事件
// 开始
var timer = null;
var arr = ['张三','李四','王五','刘二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
    // 清空定时器
    clearInterval(timer);
    timer = setInterval(function () {
        // 1.生成随机数 生成 0-1的随机数,但是不能取到1
        var randomNum = parseInt(Math.random() * arr.length);

        // 2.从数组中取出值
        oh1.innerHTML = arr[randomNum];
    },10);
};
// 停止
btns[1].onclick = function () {
    clearInterval(timer);
}

02.长图展示

// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var pic = document.getElementById('pic');

// 2.添加事件
var timer = null;
var begin = 0;
var speed = 4;
spans[0].onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin -= speed;
        if (begin <= -505){
            clearInterval(timer);
            begin = -505;
        }
        pic.style.top = begin + 'px';
    },10)
};
spans[1].onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin += speed;
        if (begin >= 0){
            clearInterval(timer);
            begin = 0;
        }
        pic.style.top = begin + 'px';
    },10)
}

03.展示阴影

<div id="box">
    <span id="cover"></span>
</div>

// 1.获取标签
var box = document.getElementById('box');
var cover = document.getElementById('cover');
// 2.添加点击事件
var timer = null;
var begin = 150;
box.onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin -= 3;
        if (begin <= 0){
            clearInterval(timer);
            begin = 0;
        }
        cover.style.top = begin + 'px';
    },10);
}

04.js定时器原理

• 一次定时器 在指定时间内, 将任务放入事件队列,等待js引擎空闲后被执行.
• setInterval(fn, 100)容易产生误区：并不是上一次fn执行完了之后再过100ms才开始执行下一次fn。 事实上，setInterval并不管上一次fn的执行结果，而是每隔100ms就将fn放入主线程队列，而两次fn之间具体间隔多久就不一定了。
• 定时器的用处, 如果有很多节点渲染,可以将多个节点放入定时器中来执行,这样就不会阻塞线程,提高用户体验

05.一次定时器执行多次操作以及递归的认识

var box = document.getElementById('box');
    var timer = setTimeout(jump,1000);
    var count = 5;
    function jump() {
        // 每次进来先清空上一个定时器
        clearTimeout(timer);
        count--;
        box.innerHTML = '要在' + count + '秒后跳转';
        if (count <= 0){
            window.location.href = 'http://www.baidu.com';
        }else {
//            timer = setTimeout(jump,1000);
            timer = setTimeout(arguments.callee,1000);
            // 递归:自己搞自己, 自己调用自己
            // arguments.callee 在函数内部指的是函数本身
        }
    }

06.简单轮播图的认识

// 1.获取标签
var oul = document.getElementById('oul');

// 2.图片轮播
// 初始值
var begin = 0;
setInterval(function () {
    begin -= 4;
    if (begin <= -1200){
        begin = 0;
    }
    oul.style.left = begin + 'px';
},20)

07.左右轮播图

// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var oul = document.getElementById('oul');

// 2.添加点击事件
// 点击右侧
var timer = null;
// 偏移量
var begin = 0;
// 索引
var loop = 0;
// 速度
var speed = 4;

// 记录标志
var flag = true;

spans[1].onclick = function () {
    if (flag == false) return;
    flag = false;
    // 页码自增1
    loop++;
    if (loop > 5){
        // 重置页码为1
        loop = 1;
        // 重置偏移量
        begin = 0;
    }
    timer = setInterval(function () {
        begin -= speed;
        if (begin <= loop * -640){
            clearInterval(timer);
            begin = -640 * loop;
            flag = true;
        }
        oul.style.left = begin + 'px';
    },10)
};
// 左边
spans[0].onclick = function () {
    if (flag == false) return;
    flag = false;
    loop--;
    if (loop < 0){
        loop = 4;
        begin = 5 * -640;
    }
    timer = setInterval(function () {
        begin += speed;
        if (begin >= loop * -640){
            clearInterval(timer);
            begin = -640 *loop;
            flag = true;
        }
        oul.style.left = begin + 'px';
    },10);
}

08.发送验证码

// 1.获取标签
var btn = document.getElementById('btn');
// 2.添加事件
var timer = null;
// 剩余的秒数
var count = 5;
btn.onclick = function () {
    // 2.1 禁止按钮点击
    this.disabled = true;

    // this 在定时器中指向窗口,因为开启定时期的时候本身就是window.setInterval()
    // 备份指针
    var that = this;

    // 2.2 倒计时
    timer = window.setInterval(function () {
        count--;
        if(count < 0){
            clearInterval(timer);
            count = 5;
            that.disabled = false;
            that.innerHTML = '重新发送验证码';
        }else {
            that.innerHTML = '剩余' + count + '秒';
        }
    },1000)
}

09.节点操作

// 1.创建节点
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题'; 
// 2.添加节点
// appendChild 在节点后面添加
// document.body.appendChild(h1);
var box = document.getElementById('box');
// insertBefore 第一个参数是要插入的节点, 第二个参数是要插入到那个节点前面 如果为null则插入到最后面
document.body.insertBefore(h1,box);

// 创建节点
var div = document.createElement('div');
div.style.width = '200px';
div.style.height = '200px';
div.style.background = 'red';
document.body.appendChild(div);

// 3.删除节点 要删除的节点
document.body.removeChild(box);
// 4.克隆节点
// cloneNode 如果为true就会复制节点里面的所有孩子节点,包括样式
// 如果为false 就只是赋值自己
var ele = box.cloneNode(false);
console.log(ele);
ele.style.marginTop = '10px';

// 添加节点
document.body.appendChild(ele);

// 替换节点
var box = document.getElementById('box');
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题';
document.body.replaceChild(h1,box);

[图片上传中...(198750-106.jpg-4eef16-1511534081422-0)]