一.日期对象
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) // 下一个兄弟