1.日期对象
1.1 实例化日期对象
<!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>
<script>
//实例化日期
//1.获取当前时间
const dateNow = new Date();
console.log(dateNow);
//2.获取指定时间
const date = new Date('2023-6-18 09:16:22')
console.log(date);
//Date是js提供的内置对象 Date对象需要和new Date联用 得到一个日期对象(object)
</script>
</body>
</html>
1.2格式化日期对象
1.2.1方法一
<body>
<script>
//格式化日期对象
//1.new Date 实例化日期对象
const date = new Date();
//2.对日期对象进行格式化
//获取年份
console.log('今天是' + date.getFullYear() + "年");
//获取月份
console.log(date.getMonth() + 1 + "月");//注意 月份是从0~11 所以需要加一
//获取日期
console.log(date.getDate() + "日");
//获取星期∏
console.log("今天是星期" + date.getDay());//周日会获取到0
if (date.getDay() === 0) {
console.log('星期日');
}
//获取小时
console.log('现在是' + date.getHours() + '点');
//获取分钟
console.log(date.getMinutes() + '分');
//获取秒钟
console.log(date.getSeconds() + '秒');
</script>
</body>
1.2.2方法二
<!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>
<div id="time"></div>
<script>
const div = document.getElementById("time");
function DateTime() {
//格式化时间=>简版
const date = new Date();
return `现在是` + date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}
setInterval(function () {
div.innerHTML = DateTime();
}, 100)
</script>
</body>
</html>
1.3 案例（时钟）
<!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>
<div></div>
<script>
//需求：页面显示变化的时间
//1.封装函数，格式化时间日期
//格式化时间日期
function getDatetime() {
//格式化时间日期
const date = new Date();
//得到年份
const year = date.getFullYear();
//得到月份
const month = date.getMonth() + 1;
//得到日期
const day = date.getDate();
//得到小时
let hour = date.getHours();
//注意：时间要补零
hour = hour < 10 ? '0' + hour : hour;
//注意：常量const是不能被改变的 否则会报错 所以需要使用变量let
//得到分钟
let minute = date.getMinutes();
minute = minute < 10 ? '0' + minute : minute;
//得到秒
let second = date.getSeconds();
second = second < 10 ? '0' + second : second;
return `'现在是北京时间：'${year}年${month}月${day}号 ${hour}:${minute}:${second}`
}
const result = getDatetime();
const div = document.querySelector('div');
//2.定时执行函数
setInterval(function () {
const result = getDatetime();
div.innerHTML = result;
}, 100)
</script>
</body>
</html>
1.3时间戳
1.3.1获取时间戳的方式：
<!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>
<div id="time"></div>
<script>
//获取时间戳
const date = new Date();
//1.时间对象.getTime()获取时间戳
//特点：需要实例化日期对象“const date = new Date();”
console.log(date.getTime());
//2.Date.now() 缺陷：只能获取当前的时间戳
//特点：不需要实例化日期对象
console.log(Date.now());
//3.推荐使用 +new Date()
//特点：不需要实例化对象，而且可以获取任意时间戳
console.log(+new Date('2025-01-01'));
</script>
</body>
</html>
1.3.2案例（利用时间戳完成倒计时效果）
注意：时间戳的单位是毫秒 (毫秒和秒的进制是1000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next">今天是2025年3月12日</p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="second">20</span>
</p>
<p class="tips">18:30:00下课</p>
</div>
<script>
// 倒计时案例 当前距离 2023年1月28日 18:30 还剩多少时间
// 转换公式
// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
// m = parseInt(总秒数 / 60 % 60) // 计算分数
// s = parseInt(总秒数 % 60) // 计算当前秒数
// 1.封装函数 用将来的时间戳(需要键盘赋值来传参)减去现在的时间戳
function getTime(newDate) {
//console.log(newDate);
//2.获取现在的时间戳
const nowDate = +new Date()
const time = (newDate - nowDate) / 1000//将时间戳转换成秒
//3.将得到的毫秒转化为时分秒
let h = parseInt(time / 3600 / 24)
let m = parseInt(time / 60 % 60)
let s = parseInt(time % 60)
//4.补零
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return [h, m, s]
}
//获取标签
const DateNew = +new Date('2025-03-12 18:00:00')
const result1 = getTime(DateNew)
//console.log(getTime(DateNew));
//获取标签
const hour = document.getElementById('hour')
const minutes = document.getElementById('minutes')
const second = document.getElementById('second')
setInterval(function () {
const result = getTime(DateNew)
//通过数组下标的方式将值赋给标签
hour.innerHTML = result[0]
minutes.innerHTML = result[1]
second.innerHTML = result[2]
}, 1000)
</script>
</body>
</html>
2.节点操作
2.1 DOM节点
DOM树：我们将HTML文档作为一个树形结构（DOM可理解为标签）
2.2查找节点
<body>
<div class="father">
<div class="son">文字描述</div>
</div>
<script>
//通过节点的方式获取父级元素 子元素.parentNode
const son = document.querySelector('.son')
//想要获取父级元素 有两种方式
//1.通过将父级元素存储到一个常量中
const father1 = document.querySelector('.father')
console.log(father1)
//2.通过节点的方式获取父级元素(更加简洁)
const father2 = son.parentNode
console.log(father2)
//3.也可以通过父节点的父节点获取相应的元素
const grandpa = son.parentNode.parentNode//得到body
console.log(grandpa)
</script>
</body>
结果：
2.3子节点查找
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//1.通过节点操作 获取子元素 元素.children
const ul = document.querySelector('ul');
console.log(ul.children);
//获取第三个li(伪数组下标节点)
const li3 = ul.children[2]
//2.通过节点操作获取兄弟元素
//前一个兄弟 第二个li
console.log(li3.previousElementSibling);
//后一个兄弟 第四个li
console.log(li3.nextElementSibling);
</script>
</body>
2.4 增加节点
2.5 删除节点
<body>
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
</div>
</body>
<script>
//删除节点(做法1)
const son1 = document.querySelector('.son1')
son1.remove()
//删除节点(做法2)
document.querySelector('.son2').remove()
//删除节点(做法3)
document.querySelector('.son3').addEventListener('click', function () {
})
</script>
