css网站开发如何建立网站平台
文章目录
- 1、实例化日期对象
- 2、相关方法
- 3、时间戳
- 4、案例：毕业🎓倒计时效果
1、实例化日期对象
- 获得当前时间
const date = new Date()
- 获得指定时间
const date = new Date('2025-4-14 20:46:00')
console.log(date)
2、相关方法
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11，因此实际开发要额外+1 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6，星期天是0，可借助数组返回星期x |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
| toLocaleString() | 获取YYYY/MM/DD HH:mm:ss格式 | 小于10时不会补0，即是2025/4/14 21:15:05，不是2025/04/014 |
| toLocaleDateString() | 获取年月日 | 2025/4/14 |
| toLocaleTimeString() | 获取时分秒 | 21:17:01 |
getDay()获取星期时返回的是0～6，且星期天是0，可用数组这么转换一下：
需求：将当前时间以:YYYY-MM-DD HH:mm 形式显示在页面并实时刷新
<!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: 40px;border: 1px solid purple;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>// 补0function format(num = 0) {return num < 10 ? '0' + num : num}// 当前时间function getCurrentTime() {const date = new Date()const year = date.getFullYear()const month = format(date.getMonth() + 1) //月份要加1const day = format(date.getDate())const hour = format(date.getHours())const minute = format(date.getMinutes())const second = format(date.getSeconds())return `${year}-${month}-${day} ${hour}:${minute}:${second}`}const div = document.querySelector('div')// 加这行，防止刚刷新页面，定时任务没触发而导致页面空白div.innerHTML = getCurrentTime()// 定时器setInterval(function () {div.innerHTML = getCurrentTime()}, 1000)</script>
</body></html>
效果：
3、时间戳
时间戳是指从1970年01月01日00时00分00秒起至现在的(毫)秒数，分为：
- 10位时间戳(秒级)
- 13位时间戳(豪秒级)
时间不可倒流，因此时间戳是唯一的，在不停的向前，获取时间戳可以通过：
- getTime() 方法
const date = new Date()
console.log(date.getTime())
// 还可以返回指定时间的时间戳
const date = new Date('2025-4-15 17:18:00')
console.log(date.getTime())
- +new Date()
// 本质做了一个类型转换，+转为数字型
// 同样还可以返回指定时间的时间戳
console.log(+new Date())
- 使用 Date.now()：无需实例化，但同时也只能获取当前时间戳
console.log(Date.now())
4、案例：毕业🎓倒计时效果
需求：计算到下课还有多少时间
这个倒计时的实现，用时分秒分别去减，很繁琐，用时间戳来实现：目标截止时间的时间戳 - 当前时间戳，再转为时分秒
<!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年4月16日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">00</span><i>:</i><span id="second">00</span></p><p class="tips">21:00:00下班</p></div><script>// 补0函数function formatZero(num) {return num < 10 ? '0' + num : num}function getTime() {const now = +new Date()const deadLine = +new Date('2025-4-15 21:00:00')const time = (deadLine - now) / 1000 // 剩余的秒数const day = formatZero(parseInt(time / 60 / 60 / 24))const hour = formatZero(parseInt(time / 60 / 60 % 24))const minute = formatZero(parseInt(time / 60 % 60))const second = formatZero(parseInt(time % 60))// 写入盒子const h = document.querySelector('#hour')const m = document.querySelector('#minutes')const s = document.querySelector('#second')h.innerHTML = hourm.innerHTML = minutes.innerHTML = second}// 单独调用一次，防止刚刷新，开始定时任务没触发，时间不对getTime()// 每秒刷新setInterval(getTime, 1000)</script>
</body></html>
效果：
