日期对象
实例化
在代码中发现了 new 关键字时，一般将这个操作称为**实例化
const date = new Date()// 得到当前的系统时间
const date1 = new Date('2008-8-8')//指定时间
方法
*01-日期对象方法
const date = new Date()
const y = date.getFullYear() /// 得到4位数的年份
const m = (date.getMonth() + 1)//得到月份 0~11 0表示1月份 11 表示12月份
const d = date.getDate() // 返回的 1~31之间的一个整数
const h = date.getHours() // 返回 0~23 小时
const f = date.getMinutes() // 返回 0~59 分钟
const s = date.getSeconds() // 返回 0~59 秒
const week = date.getDay() // 返回 0~6 0 表示星期天
02-显示格式化日期时间
<div></div>
<style>
div {
width: 400px;
height: 300px;
border: 1px solid pink;
text-align: center;
line-height: 300px;
margin:0 auto;
}
</style>
<script>
// 1 封装格式化时间函数
function getMyDate() {
// 3 获得日期对象
const date = new Date()
const y = date.getFullYear() // 年
let M = (date.getMonth() + 1) // 月
let d = date.getDate() // 日期
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
/* 2 把时间放到标签里面显示
const res = `今天是:2022年-5月-30号 10:10:10`
document.querySelector('div').innerHTML = res */
const res = `今天是: ${y}年${M + 1}月${d}号 ${h}:${m}:${s}`
document.querySelector('div').innerHTML = res
}
getMyDate()
// 4 开启定时器
setInterval(getMyDate, 1000)
</script>
时间戳
时间戳就是毫秒数,用来作倒计时.
// 1. getTime()
const date = new Date() // 必须实例化
// 得到时间戳 表示从1970年1月1日0时0分0秒 到现在总毫秒数
console.log(date.getTime())
// 2. +new Date()
console.log(+new Date())
// 3. Date.now()
console.log(Date.now());
console.log('-----------------');
// 2 得到指定时间日期的时间戳
// 得到1970年1月1日0时0分0秒 到 2022-10-1 18:30:00
console.log(+new Date('2022-10-1 18:30:00'))
倒计时案例
用事件戳解决事件加减问题(未来时间-现在时间)
// 封装函数
function getCountTime() {
// 1. 得到未来的时间戳
const fTime = +new Date('2022-10-1 18:30:00')
// 2. 得到现在的时间戳
const nTime = +new Date()
// 3. 得到剩余的时间戳 相减(fTime - nTime)
// 记得转换为 秒数
const time = (fTime - nTime) / 1000
// console.log(time)
/*let d = parseInt(time / 60 / 60 / 24)
console.log(d)*/
// 4. 转换为时分秒
let h = parseInt(time / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(time / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(time % 60)
s = s < 10 ? '0' + s : s
//console.log(h, m, s)
// 5 获取对应的 dom 元素写到盒子里面
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#second').innerHTML = s
}
// 调用函数
getCountTime()
// 开启定时器
setInterval(getCountTime, 1000)
时钟动画效果
角度换算： 公式复制即可
• // 小时角度公式：小时 * 30 + 分钟 / 60 * 30
• // 分钟角度公式：分钟* 6 + 秒 / 60 * 6
• // 秒角度公式： 当前秒数 * 6
\
