Web APIS 第三天

2022-07-05 23:04:07 阅读：146 来源： 互联网

标签：Web APIS 元素第三天 60 let Date new 节点

节点操作

　　父节点查找

　　　　子元素 . 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web APIS 第三天