JavaScript API知识笔记 第四天
一、日期对象
日期对象：用来表示时间的对象。
作用：可以得到当前系统时间。
1.实例化
在代码中发现了 new 关键字时，一般将这个操作称为实例化。
创建一个时间对象并获取时间：
获得当前时间：
const date = new Date()
获得指定时间：
const date = new Date('2026-1-23')
2.时间对象方法
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份获取四位年份 | |
| getMonth() | 获得月份取值为 0 ~ 11 | |
| getDate() | 获取月份中的每一天不同月份取值也不相同 | |
| getDay() | 获取星期取值为 0 ~ 6 | |
| getHours() | 获取小时取值为 0 ~ 23 | |
| getMinutes() | 获取分钟取值为 0 ~ 59 | |
| getSeconds() | 获取秒取值为 0 ~ 59 |
案例
页面显示时间
需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08
①：调用日期对象方法进行转换
②：记得数字要补0
③：字符串拼接后，通过 innerText 给 标签
const div=document.querySelector('div')
function getTime(){
const date = new Date()
let y = date.getFullYear()
let mon = date.getMonth() + 1
let d = date.getDate()
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()
y = y < 10 ? '0' + y : y
mon = mon < 10 ? '0' + mon : mon
d = d < 10 ? '0' + d : d
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return `${y}-${mon}-${d} ${h}:${m}:${s}`
}
div.innerHTML=getTime()
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()——快速便捷
console.log(+new.Date())
3.使用 Date.now()
无需实例化,但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now())
案例
毕业倒计时效果
需求：计算到下课还有多少时间
①：用将来时间减去现在时间就是剩余的时间
②：核心： 使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为 天 时 分 秒
const div = document.querySelector('div')
function getDate() {
const future = +new Date('2026-1-25 17:30:00')
const now = +new Date()
const time = (future - now) / 1000
let d = parseInt(time / 60 / 60 / 24)
let h = parseInt(time / 60 / 60 % 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
d = d < 10 ? '0' + d : d
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return div.innerHTML = `${d} 天 ${h} 时 ${m} 分 ${s} 秒`
}
getDate()
setInterval(getDate, 1000)
二、节点操作
1.DOM节点
DOM树里每一个内容都称之为节点
节点类型：
-元素节点♥
·所有的标签 比如 body、 div
·html 是根节点
-属性节点
·所有的属性 比如 href / class属性
-文本节点
·所有的文本
2.查找节点
通过节点关系来查找节点
-父节点查找
·parentNode 属性
·返回最近一级的父节点 找不到返回为null
子元素.parentNode
案例
关闭二维码案例
需求：关闭二维码案例
const box1 = document.querySelector('.box1')
box1.addEventListener('click', function () {
box1.parentNode.style.display = 'none'
})
-子节点查找
1.childNodes
·获得所有子节点、包括文本节点（空格、换行）、注释节点等
2.children 属性 （重点）
·仅获得所有元素节点
·返回的还是一个伪数组
父元素.children
-兄弟关系查找
1.下一个兄弟节点
nextElementSibling 属性
2.上一个兄弟节点
previousElementSibling 属性
3.增加节点
(1)创建节点
创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
document.createElement('标签名')
(2)追加节点
要在界面看到，还得插入到某个父元素中
-插入到父元素的最后一个子元素:
父元素.appendChild(要插入的元素)
-插入到父元素中某个子元素的前面:
父元素.insertBefore(要插入的元素,在哪个元素前面)
案例
需求：按照数据渲染页面
①：准备好空的ul 结构
②：根据数据的个数，创建一个新的空li
③：li里面添加内容 img 标题等
④：追加给ul
const ul=document.querySelector('.clearfix')
for(let i=0;i<data.length;i++){
const li=document.createElement('li')
ul.appendChild(li)
li.innerHTML=`<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>`
}
只展示核心部分
(3)克隆节点
复制一个原有的节点，把复制的节点放入到指定的元素内部
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
-若为true，则代表克隆时会包含后代节点一起克隆
-若为false，则代表克隆时不包含后代节点
-默认为false
4.删除节点
JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法：
父元素.removeChild(要删除的元素)
注：
-如不存在父子关系则删除不成功
-删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
三、M端事件
触屏事件 touch（也称触摸事件）
常见的触屏事件：
四、JS插件
-插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
-学习插件的基本过程
·熟悉官网,了解这个插件可以完成什么需求 www.swiper.com.cn/
·在线演示,找到符合自己需求的demo www.swiper.com.cn/demo/index.…
·查看基本使用流程 www.swiper.com.cn/usage/index…
·查看APi文档,去配置自己的插件 www.swiper.com.cn/api/index.h…
·注意: 多个swiper同时使用的时候, 类名需要注意区分
