目录
前言
日期对象
目标
日期对象
作用
实例化
目标
创建一个时间对象并获取时间
日期对象方法
目标
案例显示
时间戳
目标
什么是时间戳
算法
怎么获得时间戳
使用getTime()方法
简写+new Date()
使用Date.now()
综合案例：倒计时器
总结
前言
走你自己的路
日期对象
目标
掌握日期对象，可以让网页显示日期
日期对象
用来表示时间的对象
作用
可以得到当前系统的时间
实例化
目标
能够实例化日期对象
在代码中发现了new关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
获取当前时间
const date = new Date();获得指定时间
const date = new Date('2008-8-8'); console.log(date);日期对象方法
目标
能够使用日期对象中的方法写出常见日期使用场景
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
getFullYear() 获取年份
getMonth() 获取月份
getDate() 获取月份中的某一天
getDay() 获取星期
getHours() 获取小时
getMinutes() 获取分钟
getseconds() 获取秒
取值为 0~11，不同月份取值也不相同，取值为 0~6，取值为 0~23，取值为0~59，取值为 0~59
案例显示
<!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>const div = document.querySelector('div');
function getMyDate() {const date = new Date();let h = date.getHours();let m = date.getMinutes();let s = date.getSeconds();h = h < 10 ? '0' + h : h;m = m < 10 ? '0' + m : m;s = s < 10 ? '0' + s : s;return `今天是:${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`;}
div.innerHTML = getMyDate();setInterval(function () {div.innerHTML = getMyDate();}, 1000);</script>
</body>
</html>时间戳
目标
能够获得当前时间戳使用场景:如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成。
什么是时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数它是一种特殊的计量时间的方式
算法
将来的时间戳 -现在的时间戳 = 剩余时间亳秒数
剩余时间亳秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms-现在时间截1000ms=1000ms1000ms转换为就是0小时0分1秒
怎么获得时间戳
三种方法
使用getTime()方法
const date = new Date();
console.log(date.getTime());
简写+new Date()
console.log(+new Date());
使用Date.now()
无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now());
1.实例化日期对象
new Date();
2.日期对象方法里面月份和星期有什么注意的?
月份是0~11，星期是 0~6
3.获取时间戳有哪三种方式?重点记住那个?
date.getTime()+new Date()Date.now()
重点记住 +new Date()因为可以返回当前时间戳或者指定的时间戳
综合案例：倒计时器
<!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>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f9;/* Background color for the page */}
.container {width: 250px;height: 400px;background-color: #b71c1c;/* Dark red background */display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 20px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.date {font-size: 20px;color: white;margin-bottom: 20px;}
.font {margin-top: 20px;font-size: 30px;color: white;margin-bottom: 20px;}
.countdown-box {margin-top: 20px;display: flex;justify-content: center;gap: 5px;/* 设置间距 */}
.countdown {font-size: 24px;color: white;text-align: center;width: 60px;height: 60px;background-color: black;display: flex;justify-content: center;align-items: center;border-radius: 5px;}
.colon {font-size: 24px;color: white;margin-top: 10px;/* 调整冒号的垂直对齐 */}
.footer {font-size: 20px;color: white;margin-top: 20px;}</style>
</head>
<body><div class="container"><div class="date"></div><div class="font">下班倒计时</div><div class="countdown-box"><div class="countdown"></div><div class="colon">:</div><div class="countdown"></div><div class="colon">:</div><div class="countdown"></div></div><div class="footer">18:30:00下课</div></div><script>const dateDiv = document.querySelector('.date');const countdownDivs = document.querySelectorAll('.countdown');
function getMyDate() {const date = new Date();return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号`;}
function getEndTime() {const now = new Date();const endHours = 18;const endMinutes = 30;const endSeconds = 0;
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHours, endMinutes, endSeconds);
if (now > end) {end.setDate(end.getDate() + 1);}
return end.getTime();}
function formatTime(time) {return time < 10 ? '0' + time : time;}
function updateCountdown() {const now = new Date().getTime();const end = getEndTime();const diff = end - now;
if (diff <= 0) {countdownDivs.forEach(div => div.innerHTML = '00');clearInterval(intervalId);return;}
const hours = Math.floor(diff / (1000 * 60 * 60));const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((diff % (1000 * 60)) / 1000);
countdownDivs[0].innerHTML = formatTime(hours);countdownDivs[1].innerHTML = formatTime(minutes);countdownDivs[2].innerHTML = formatTime(seconds);}
dateDiv.innerHTML = getMyDate();updateCountdown();const intervalId = setInterval(function () {dateDiv.innerHTML = getMyDate();updateCountdown();}, 1000);</script>
</body>
</html>总结
做你自己