Web APIS 第三天

节点操作

　　父节点查找

　　　　子元素 . parentNode   返回最近一级的父节点 找不到返回为null

　　关闭多个二维码案例 : 点击谁 谁关闭

let btns = document.querySelectorAll('.close_btn');

for (let i = 0 ; i <= btns.length ; i++){
    btns[i].addEventListener('click',function () {
        this.parentNode.style.display = 'none';
    })
}

 

　　子节点查找 (重点)

　　　　父元素.children  (仅获取所有元素节点 , 是个伪数组)

 

　　增加节点

　　　　创造出一个新的网页元素 , 再添加到网页内, 一般先创建节点, 再插入

　　　　　　document.createElement ('标签名')

 

　　追加节点

　　　　//插入到这个父元素最后

　　　　父元素 . appendChild(要插入的元素)

　　　　//插入父元素某个子元素前面

　　　　父元素 . insertBefore(要插入的元素 , 在哪个元素前面)

 

　　克隆节点

　　　　//克隆一个已有元素节点

　　　　元素. cloneNode(布尔值)

　　　　　　cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

　　　　　　 若为true，则代表克隆时会包含后代节点一起克隆

　　　　　　 若为false，则代表克隆时不包含后代节点

　　　　　　 默认为false

 

　　删除节点

　　　　必须通过父元素进行删除

　　　　父元素 . removeChild(要删除的元素)

　　　　　　注意 : 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

 

 

时间对象

 

　　实例化

　　　　获取当前时间

　　　　　　let date = new Date();

　　　　获得指定时间

　　　　　　let date = new Date('1949-10-1') ;

 

getFullYear()  　　获得年份  　　　　获取四位年份

getMonth()　　　　获得月份  　　　　　　　　取值为 0 ~ 11

getDate()  　　　　　获取月份中的每一天  　　不同月份取值也不相同

getDay()　　　　　　获取星期　　　　  　　取值为 0 ~ 6

getHours()　　　　　　获取小时　　　　　　取值为 0 ~ 23　　

getMinutes()　　　　获取分钟　　　　　　取值为 0 ~ 59

getSeconds()　　　　获取秒　　　　　　取值为 0 ~ 59

 

 

 

时间戳

//时间戳是总的毫秒数 是独一无二的
//计算倒计时 : 核心思想
//将来时间 9.1 12:00 有一个时间戳
//现在时间 7.5 17:00 有一个时间戳
//可以利用将来的时间戳 减去 现在的时间戳 就是剩余的时间毫秒数
//转化为时分秒就是剩余时间了

//获取时间戳的三种方式
//1. getTime()
let date = new Date();
console.log(date.getTime());
//2. +new Date()
console.log(+new Date());
console.log(+new Date('2022-7-6 12:00:00'));//指定时间的时间戳
//3. Date.now() (不用实例化,只能得到当前的时间戳)
console.log(Date.now());

转换公式：

 d = parseInt(总秒数/ 60/60 /24); // 计算天数

 h = parseInt(总秒数/ 60/60 %24) // 计算小时

 m = parseInt(总秒数 /60 %60 ); // 计算分数

 s = parseInt(总秒数%60); // 计算当前秒数

 

　　下班倒计时 案例

 

　　

<script>
  let hour = document.querySelector('#hour');
  let minutes = document.querySelector('#minutes');
  let scond = document.querySelector('#scond');

  time();

  setInterval(time,1000)

  function time(){
    //1. 得到现在的时间戳
    let now = +new Date();
    //2. 得到指定时间的时间戳
    let last = +new Date('2022-7-5 18:30:00');
    //3. (计算剩余的毫秒数)/1000 === 剩余的秒数
    let count = (last - now) / 1000;
    //4. 转化为时分秒
    // let day = parseInt(count/60/60/24);//计算天数
    let h = parseInt(count/60/60%24);//计算小时
    h = h < 10 ? '0' + h : h;
    let m = parseInt(count/60%60);//计算分钟
    m = m < 10 ? '0' + m : m;
    let s = parseInt(count%60);//计算秒钟
    s = s < 10 ? '0' + s : s;

    hour.innerHTML = h;
    minutes.innerHTML = m;
    scond.innerHTML = s;
  }
</script>