需要实例化以后才能执行
创建Date内置对象(传参和不传参)
// 1. 直接创建,会输出当前时间
let date = new Date()
console.log(date) // Sat Sep 17 2022 22:53:59 GMT+0800 (中国标准时间)
// 2. 带参数创建,可以传入一个字符串型的日期(年必选,其他可选)
let date1 = new Date('2022')
console.log(date1) // Sat Jan 01 2022 08:00:00 GMT+0800 (中国标准时间)
// 传入一个数字型的时间戳
let date2 = new Date(1663426045661)
console.log(date2) // Sat Sep 17 2022 22:47:25 GMT+0800 (中国标准时间)
// 一个日期(年月是必选的,日时分秒毫秒可选)
let date3 = new Date(2022, 09) // 月份会 +1
console.log(date3) // Sat Oct 01 2022 00:00:00 GMT+0800 (中国标准时间)
常用方法(get系列和set系列)
let d = new Date()
// get系列是获取时间值的方法
// 获取年
console.log(d.getFullYear()) // 2022
// 获取月,会比真实月份小一
console.log(d.getMonth()) // 8
// 获取日
console.log(d.getDate()) // 17
// 获取星期,0-6表示星期天到星期六
console.log(d.getDay()) // 6
// 获取小时
console.log(d.getHours()) // 23
// 获取分钟
console.log(d.getMinutes()) // 1
// 获取秒数
console.log(d.getSeconds()) // 20
// set系列是设置的方法
console.log(d.setFullYear(2023)) // 1694962970032
console.log(d.setMonth(5)) // 1687014219269
console.log(d.setDate(5)) // 1685977436950
获取时间戳的几种方法
// 获取时间戳的方法
// 1. getTime()
console.log(d.getTime()) // 1685977556989
// 2. +new Date()
console.log(+new Date()) // 1663427209863
// 3. valueOf()
console.log(d.valueOf()) // 1685977750154
// 4. Date.now()
console.log(Date.now()) // 1663427372824
日期函数封装
function showTime() {
let date = new Date();
// 年
let year = date.getFullYear();
// 月 月份要比实际的月份少1 所以要加1
let month = date.getMonth() + 1;
month = month < 10 ? '0' + month : month;
// 日
let dates = date.getDate();
dates = dates < 10 ? '0' + dates : dates;
// 星期
let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
let days = arr[date.getDay()];
// 小时
let hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
// 分钟
let minutes = date.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
// 秒数
let seconds = date.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
return year + '年' + month + '月' + dates + '日' + days + ' ' + hours + ':' + minutes + ':' + seconds;
}
let Time = showTime();
console.log(Time);
倒计时封装
<div class="box">
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
<script>
// 倒计时
const hours = document.querySelector('.hours')
const minutes = document.querySelector('.minutes')
const seconds = document.querySelector('.seconds')
function countDown(time) {
// 总时间戳 = 将来的时间戳 - 现在的时间戳
let nowTime = +new Date()
const futureTime = +new Date(time)
let times = (futureTime - nowTime) / 1000 // 换算成秒数
// 剩余的天数
let d = parseInt(times / 60 / 60 / 24)
d = d < 10 ? '0' + d : d
// 时
let h = parseInt(times / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
// 分
let m = parseInt(times / 60 % 60)
m = m < 10 ? '0' + m : m
// 秒
let s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
// return `${d} : ${h} : ${m} : ${s}`
return {
date: d,
h: h,
m: m,
s: s
}
}
function fn() {
let res = countDown('2022-07-07 18:00:00')
hours.innerHTML = res.h
minutes.innerHTML = res.m
seconds.innerHTML = res.s
}
fn()
// 定时器直接调用函数时,不要加括号,切记
setInterval(fn, 1000)
</script>