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

一.日期对象

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)  // 下一个兄弟

三.增加节点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值