其他分享
首页 > 其他分享> > Web APIS 第三天

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>
 
                 

 

 

标签:Web,APIS,元素,第三天,60,let,Date,new,节点
来源: https://www.cnblogs.com/LZYBOK/p/16448945.html