JavaScript从基础到精通（webAPIs day06 日期对象 + 时间戳 + DOM节点操作 + 移动端滑动）

mc.byte

已于 2022-12-02 18:20:14 修改

阅读量94

点赞数

分类专栏： # 笔记 web前端文章标签： javascript 前端开发语言

于 2022-09-06 08:59:52 首次发布

本文链接：https://blog.csdn.net/m0_58044090/article/details/126712236

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

一.日期对象

1.1实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

    // 实例化  new 
    // 1. 得到当前时间 
    const date = new Date()
    console.log(date)
    // 2. 指定时间
    const date1 = new Date('2022-10-1 08:30:00')
    console.log(date1)

1.2日期对象方法

代码例：

    // 获得日期对象
    const date = new Date()
    // 使用里面的方法
    console.log(date.getFullYear())
    console.log(date.getMonth() + 1)  // 月份要 + 1
    console.log(date.getDate())
    console.log(date.getDay())  // 星期几

案例：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面如：2000-10-01 08：08

分析：

①：调用日期对象方法进行转换

②：记得数字要补0

③：字符串拼接后，通过 innerText 给标签

1.3 时间戳

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：

1.使用getTime()方法

const date = new Date()

console.log(date.getTime())

2. + new Date() 简写

comsole.log(+new Date())

3. 使用 Date.now()

无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

console,log(Date.now())

代码例：

    // 1. getTime()
    const date = new Date()
    console.log(date.getTime())
    // 2. +new Date()
    console.log(+new Date())
    // 3. Date.now()
    console.log(Date.now());

+ new Date() 常用 (因为可以返回当前时间戳或者指定的时间戳)

// 2.重点 +new Date()   
    console.log(+new Date())
    console.log('-----------------');
    console.log(+new Date('2022-4-1 18:30:00'))  //返回指定时间戳

案例：返回当前周几

    // 我要根据日期 Day()  0 ~ 6  返回的是 星期一
    const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const date = new Date()
    console.log(date.getDay())  //根据当前周几返回0~6
    console.log(arr[date.getDay()])  //把他返回的数字周几当索引号 输出汉字版

案例：倒计时效果

分析： ①：用将来时间减去现在时间就是剩余的时间

②：核心：使用将来的时间戳减去现在的时间戳

③：把剩余的时间转换为天时分秒

注意：

1. 通过时间戳得到是毫秒，需要转换为秒在计算

2. 转换公式：

d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

二.节点操作

2.1 父节点查找

parentNode 属性
返回最近一级的父节点找不到返回为null

 <div class="yeye">
    <div class="dad">
      <div class="baby">x</div>
    </div>
  </div>
  <script>
    const baby = document.querySelector('.baby')
    console.log(baby)  // 返回dom对象
    console.log(baby.parentNode)  // 返回dom对象
    console.log(baby.parentNode.parentNode)  // 返回dom对象

案例：关闭广告

<body>
  <div class="father">
    <button class="baby">X</button>
  </div>
  <script>
    // 1.获取元素
    const baby = document.querySelector('.baby')
    // 2.子元素事件监听
    baby.addEventListener('click', function () {
      this.parentNode.style.display = 'none'     //this在baby里，所以指代baby
    })
  </script>
</body>

2.2 子节点查找：

childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性 （重点）

仅获得所有元素节点
返回的还是一个伪数组

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

 const ul = document.querySelector('ul')  // ul
 console.log(ul.children)  // 得到（所有小li）伪数组  选择的是 亲儿子

2.3兄弟关系查找

下一个兄弟节点 nextElementSibling 属性
上一个兄弟节点 previousElementSibling 属性

    const li2 = document.querySelector('ul li:nth-child(2)')
    console.log(li2.previousElementSibling)  // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟