js基础第五天

作者: LIT乐言 | 来源:发表于2017-11-25 00:49 被阅读0次

01-获取孩子节点

childNodes 获取的包括文本

nodeType 为1是标签为2是属性为3是文本

  var box = document.getElementById('box');
  var btns = box.childNodes;
  //    console.log(btns);

  var arrNode = [];
  for (var i = 0; i<btns.length; i++){
      if (btns[i].nodeType == 1){
          // 标签元素
          arrNode.push(btns[i]);
      }
  }
  console.log(arrNode);

children 直接可以获取到元素节点

02-获取兄弟节点

nextElementSibling 在IE9以上用这个
nextSibling IE9一下用这个
兼容写法 var next3 = btn.nextElementSibling || btn.nextSibling;

03-获取父亲节点

 // 获取父亲节点
console.log(btn.parentNode);

03-通过类名获取标签的封装

getElementsByClassName() 在IE9以下无效

兼容写法

  // 兼容写法
  function getEleClassName(dom,className) {
      if (dom.getElementsByClassName){
          // 此方法可以识别
          return dom.getElementsByClassName(className);
      }else {
          // 方法不能识别 *通配符选择器,可以获取dom下面的所有标签
          var eles = dom.getElementsByTagName('*');
          // 存放标签
          var tempArr = [];
          for(var i = 0; i<eles.length; i++){
              if (eles[i].className == className){
                  tempArr.push(eles[i]);
              }
          }
          return tempArr;
      }
  }

04-节点的使用&九宫格动态创建

// 1.获取标签
var btns = document.getElementById('box').getElementsByTagName('button');
var bottom = document.getElementById('bottom');
// 2.添加节点
// 用来存放节点
var array = [];
// 总列数
var count = 3;
// 当前行号
var row = 0;
// 当前列号
var col = 0;
// 间距
var margin = 10;
// 添加节点
btns[0].onclick = function () {
    // 2.1 创建节点
    var div = document.createElement('div');
    bottom.appendChild(div);
    div.className = 'curr';
    // 添加到数组
    array.push(div);
    // 遍历
    for (var i = 0; i < array.length; i++) {
        row = parseInt(i / count);
        col = i % count;
        array[i].style.left = col * (100 + margin) + 'px';
        array[i].style.top = row * (100 + margin) + 'px';
    }
};
// 删除节点
btns[1].onclick = function () {
    // 删除节点
    bottom.removeChild(array.pop());
}

05-发微博

// 1.获取标签
var box = document.getElementById('box');
var textA = box.children[0];
var btn = box.children[1];
var oul = box.children[2];

// 2.添加点击事件
btn.onclick = function () {
    var content = textA.value;
    if (content == ''){
        // 判断有没有内容,如果没有内容直接返回
        alert('请输入内容');
        return;
    }

    // 1.创建li
    var oli = document.createElement('li');
    var oa = document.createElement('a');
    oa.innerHTML = '删除';
    oli.innerHTML = textA.value;
    oli.appendChild(oa);

    // 清空内容
    textA.value = '';
    oul.insertBefore(oli,oul.children[0]);
//        if(oul.children.length > 0){

//        }else {
//            // 第一次添加到头部
//            oul.appendChild(oli);
//        }
    // 给a标签绑定事件
    oa.onclick = function () {
        oul.removeChild(this.parentNode);
    }
}

06-日期对象的认识

getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。时间戳
valueOf() 返回 Date 对象的原始值。时间戳

1969年8月,贝尔实验室的程序员肯汤普逊利用B编译语言，创造了C语言.
最初计算机操作系统是32位，而时间也是用32位表示。也就是说32位能表示的最长时间是68年，而实际上到2038年01月19日03时14分07秒，便会到达最大时间，过了这个时间点，所有32位操作系统时间便会变为10000000 00000000 00000000 00000000，也就是1901年12月13日20时45分52秒，这样便会出现时间回归的现象，很多软件便会运行异常了。

到这里，我想问题的答案已经出来了:因为用32位来表示时间的最大间隔是68年，而最早出现的UNIX操作系统考虑到计算机产生的年代和应用的时限综合取了1970年1月1日作为UNIX TIME的纪元时间(开始时间)，至于时间回归的现象相信随着64为操作系统的产生逐渐得到解决，因为用64位操作系统可以表示到292,277,026,596年12月4日15时30分08秒，相信我们的N代子孙，哪怕地球毁灭那天都不用愁不够用了，因为这个时间已经是千亿年以后了。

07-自定义时间

如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间

   // 1.自定义时间
  // 如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间
  var date = new Date('2018/2/23 10:10:10');
  console.log(date.getFullYear());
  console.log(date.getMonth());
  console.log(date.getDate());
  var mins = date.getTime();

  // 计算事件差
  var nowDate = new Date();
  // 获取当前的毫秒数
  var nowMins = nowDate.getTime();

  console.log(mins);
  console.log(nowMins);
  console.log(mins - nowMins);

08-钟表案例

// 1.获取标签
var h = document.getElementById('hour');
var m = document.getElementById('minute');
var s = document.getElementById('second');

// 2.获取当前的时分秒
setInterval(function () {
    var date = new Date();
    // 获取毫秒
//        var minSecond = date.getMilliseconds();

    // 秒针
    var second = date.getSeconds();
    // 分针
    var minute = date.getMinutes();
    // 时针
    var hour = date.getHours()%12 + minute/60;

    // 2.2旋转
    // 秒针
    s.style.transform = 'rotate('+ second*6 +'deg)';
    m.style.transform = 'rotate('+ minute*6 +'deg)';
    h.style.transform = 'rotate('+ hour*30 +'deg)';
},100)

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