1.日期对象
1. 日期对象是用来表示时间的对象，可以得到当前系统的时间。
2.使用new关键字实例化日期对象
const date = new Data(),参数为空获取的是当前时间，还可以指定时间const date = new Data('2025-12-31')
1.1 常见方法
1.2 获取当前时间（使用计时器）
也可以使用date的toLocalDate（）方法
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 30px;
border: 1px solid pink;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div></div>
<script>
function getDate() {
// 1.创建日期对象
const date = new Date()
// 2.使用相关的方法
let year = date.getFullYear() // 得到2025
let month = date.getMonth()+1 // 月份从0开始，所以要加1
let day = date.getDate() // 得到日期
let hours = date.getHours() // 得到小时
hours = hours < 10 ? '0' + hours : hours // 如果小时数小于10，在前面添加0
let minutes = date.getMinutes() // 得到分钟
minutes = minutes < 10 ? '0' + minutes : minutes // 如果分钟数小于10，在前面添加0
let seconds = date.getSeconds() // 得到秒数
seconds = seconds < 10 ? '0' + seconds : seconds // 如果秒数小于10，在前面添加0
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
const div = document.querySelector('div')
// 设置计时器，每1000毫秒（1秒）调用一次getDate函数，更新div的内容
div.innerHTML = getDate()
setInterval(function(){
div.innerHTML = getDate()
}, 1000)
</script>
</body>
</html>1.3 时间戳
1.4 获取时间戳的三种方式
1.第三种方法只能得到当前的时间戳，不能做倒计时
2.重点掌握第二种方法
js
<script>
// 1.使用getTime方法获取时间戳
const date = new Date()
document.write(date.getTime() + '<br>')
// 2.使用+new Date()获取时间戳
document.write(+new Date() + '<br>')
// 3.使用Date.now()获取时间戳
document.write(Date.now())
</script>1.5 倒计时效果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 30px;
border: 1px solid pink;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div>
<span>2026年倒计时:</span>
<span></span>
</div>
<script>
// 1.获取元素
const span = document.querySelector('span:nth-child(2)')
// 2.设置两个时间戳
const now = +new Date()
const newYear = +new Date('2026-01-01 00:00:00')
let remain = newYear - now
// 3. 将得到的毫秒值转换成倒计时格式
let d = parseInt(remain / 1000 / 60 / 60 / 24)
let h = parseInt(remain / 1000 / 60 / 60 % 24)
h = h > 10 ? h : '0' + h
let m = parseInt(remain / 1000 / 60 % 60)
m = m > 10 ? m : '0' + m
let s = parseInt(remain / 1000 % 60)
s = s > 10 ? s : '0' + s
// 4. 渲染到页面
span.innerHTML = `${d}天:${h}时:${m}分:${s}秒`
//设置计时器
setInterval(function() {
// 2.设置两个时间戳
const now = +new Date()
const newYear = +new Date('2026-01-01 00:00:00')
let remain = newYear - now
// 3. 将得到的毫秒值转换成倒计时格式
let d = parseInt(remain / 1000 / 60 / 60 / 24)
let h = parseInt(remain / 1000 / 60 / 60 % 24)
h = h > 10 ? h : '0' + h
let m = parseInt(remain / 1000 / 60 % 60)
m = m > 10 ? m : '0' + m
let s = parseInt(remain / 1000 % 60)
s = s > 10 ? s : '0' + s
// 4. 渲染到页面
span.innerHTML = `${d}天:${h}时:${m}分:${s}秒`
},1000)
</script>
</body>
</html>2.节点操作
2.1 DOM节点
2.2 查找节点
1.利用关系可以很方便的查找每一个节点
父节点查找
- 使用子元素的parentNode属性返回最近一级的父节点，找不到返回为null
- 这样子就可以不需要获取父节点了，只获取子节点就可以操作父节点的style、innerHtml等等
- 比如三个广告box，每个box都有关闭按钮，那么只需要设置事件：点击关闭按钮，将按钮的父级的display设置为none即可
子节点查找
兄弟节点查找
- 通过nextnextElementSibling和previousElementSibling属性可以获得相邻的兄弟节点
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><p>我是第一个段落</p></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
// 子节点
// 1.获取元素
const ul = document.querySelector('ul')
// 2.获取子节点
const li = ul.children // 返回伪数组，包含所有子节点
console.log(li);
// 3.遍历子节点
for(let i = 0; i < li.length; i++) {
console.log(li[i]);
}
// 兄弟节点
const li2 = document.querySelector('li:nth-child(2)')
console.log(li2);
// 获取上一个元素兄弟
const li1 = li2.previousElementSibling
console.log(li1);
// 获取下一个元素兄弟
const li3 = li2.nextElementSibling
console.log(li3);
</script>
</body>
</html> 2.3 新增元素
创建节点
- 直接用document.creatElement('标签名')
追加节点
代码演示
js
<script>
// 1.创建节点
const li = document.createElement('li')
// 2.追加节点
const ul = document.querySelector('ul')
ul.appendChild(li) // appendChild是作为最后一个元素
// 3.添加内容
li.innerHTML = '我是新增的li'
// 向前面插入元素
const li2 = document.createElement('li')
ul.insertBefore(li2, ul.children[0])
li2.innerHTML = '我是新增的li2'
</script >克隆节点
js
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<script>
// 克隆一个第一个li并且追加到最后
const ul = document.querySelector('ul')
const li1 = ul.children[0].cloneNode(true)
ul.appendChild(li1)
</script>
</ul>
</body> 删除节点
3.M端事件
M端就是moblie手机端
4.插件
4.1 swiper插件
可以用来实现手机端和电脑端大部分滑动功能