js的Date内置对象小汇总

2023 年 10 月 24 日

201 次浏览

3582字数

需要实例化以后才能执行

创建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>

原文链接：https://blog.csdn.net/qq_52845451/article/details/126912319

js的Date内置对象小汇总