【前端】JS耗时计算/时间转换/日期/本周/本月/格式化

目录

• 一、效果
• 二、代码
• 三、完整代码

回到顶部

一、效果

 

回到顶部

二、代码

/**
 * 格式化时间
 * @param {*} fmt 如 'yyyy-MM-dd HH:mm:ss'
 * @param {*} date Date类型
 */
const format = (fmt, date) => {
    var ret;
    var opt =
    {
        "y+": date.getFullYear().toString(),        // 年
        "M+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "m+": date.getMinutes().toString(),         // 分
        "s+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

/**
 * 计算耗时
 * @param {*} timeNumber 如：338558（单位：ms）
 * 返回：00:05:38,558
 */
const calcTime = (timeNumber) => {
    var hUnit = 60 * 60 * 1000;
    var mUnit = 60 * 1000;
    var sUnit = 1000;
    var h = Math.trunc(timeNumber / hUnit);
    var m = Math.trunc((timeNumber % hUnit) / mUnit);
    var s = Math.trunc(((timeNumber % hUnit) % mUnit) / sUnit);
    var ms = Math.trunc(((timeNumber % hUnit) % mUnit) % sUnit);
    var calcResult = `${(Array(2).join(0) + h).slice(-2)}:${(Array(2).join(0) + m).slice(-2)}:${(Array(2).join(0) + s).slice(-2)},${(Array(3).join(0) + ms).slice(-3)}`;
    return calcResult
}

/**
 * 获取时间
 * @param {*} count 0-当前时间; <0-前N天; >0-后N天
 * 返回如：2022-10-20 14:01:42
 */
const getDate = (count) => {
    const fmt = 'yyyy-MM-dd HH:mm:ss'
    let newDate = null

    if (count === 0) {
        newDate = format(fmt, new Date())
    } else {
        newDate = format(fmt, new Date(new Date().getTime() + count * 24 * 3600 * 1000))
    }

    return newDate
}

/**
 * 获得本周的开始与结束日期
 * 返回如：[ "2022-10-24 00:00:00", "2022-10-30 00:00:00" ]
 */
const getNowWeekDate = () => {
    let data = new Date() //当前日期
    let year = Number(data.getFullYear());//当前年
    let month = Number(data.getMonth()) + 1;
    let nowMonth = Number(data.getMonth()); //当前月
    let day = Number(data.getDate()); //当天

    //计算某日是本月第几周
    let mydate = new Date(year, month - 1, day);
    let weekday = mydate.getDay(); //获取该日是星期几，0代表星期日//今天本周的第几天
    let weekno = Math.ceil((day + 6 - weekday) / 7); // 本月第几周

    let weekStartDate = new Date(year, nowMonth, day + 1 - weekday);
    let weekEndDate = new Date(year, nowMonth, day + 7 - weekday);
    return [format('yyyy-MM-dd HH:mm:ss', weekStartDate), format('yyyy-MM-dd HH:mm:ss', weekEndDate)];
}

/**
 * 获得本月的开始与结束日期
 * 返回如：[ "2022-10-01 14:01:42", "2022-10-31 00:00:00" ]
 */
const getNowMonthDate = () => {
    // 获取当前月的第一天
    var start = new Date();
    start.setDate(1);
    // 获取当前月的最后一天
    var date = new Date();
    var currentMonth = date.getMonth();
    var nextMonth = ++currentMonth;
    var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
    var oneDay = 1000 * 60 * 60 * 24;
    var end = new Date(nextMonthFirstDay - oneDay);

    return [format('yyyy-MM-dd HH:mm:ss', start), format('yyyy-MM-dd HH:mm:ss', end)]
}

回到顶部

三、完整代码

<!--  -->
<template>
    <div class='content'>
        <div><span>当前时间：</span>{{ getDate(0) }}</div>
        <div><span>前4天日期：</span>{{ getDate(-4) }}</div>
        <div><span>后3天日期：</span>{{ getDate(3) }}</div>
        <div><span>本周起始日期：</span>{{ getNowWeekDate() }}</div>
        <div><span>本月起始日期：</span>{{ getNowMonthDate() }}</div>
        <div><span>338558ms：</span>{{ calcTime(338558) }}</div>
    </div>
</template>

<script setup>

/**
 * 格式化时间
 * @param {*} fmt 如 'yyyy-MM-dd HH:mm:ss'
 * @param {*} date Date类型
 */
const format = (fmt, date) => {
    var ret;
    var opt =
    {
        "y+": date.getFullYear().toString(),        // 年
        "M+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "m+": date.getMinutes().toString(),         // 分
        "s+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

/**
 * 计算耗时
 * @param {*} timeNumber 如：338558（单位：ms）
 * 返回：00:05:38,558
 */
const calcTime = (timeNumber) => {
    var hUnit = 60 * 60 * 1000;
    var mUnit = 60 * 1000;
    var sUnit = 1000;
    var h = Math.trunc(timeNumber / hUnit);
    var m = Math.trunc((timeNumber % hUnit) / mUnit);
    var s = Math.trunc(((timeNumber % hUnit) % mUnit) / sUnit);
    var ms = Math.trunc(((timeNumber % hUnit) % mUnit) % sUnit);
    var calcResult = `${(Array(2).join(0) + h).slice(-2)}:${(Array(2).join(0) + m).slice(-2)}:${(Array(2).join(0) + s).slice(-2)},${(Array(3).join(0) + ms).slice(-3)}`;
    return calcResult
}

/**
 * 获取时间
 * @param {*} count 0-当前时间; <0-前N天; >0-后N天
 * 返回如：2022-10-20 14:01:42
 */
const getDate = (count) => {
    const fmt = 'yyyy-MM-dd HH:mm:ss'
    let newDate = null

    if (count === 0) {
        newDate = format(fmt, new Date())
    } else {
        newDate = format(fmt, new Date(new Date().getTime() + count * 24 * 3600 * 1000))
    }

    return newDate
}

/**
 * 获得本周的开始与结束日期
 * 返回如：[ "2022-10-24 00:00:00", "2022-10-30 00:00:00" ]
 */
const getNowWeekDate = () => {
    let data = new Date() //当前日期
    let year = Number(data.getFullYear());//当前年
    let month = Number(data.getMonth()) + 1;
    let nowMonth = Number(data.getMonth()); //当前月
    let day = Number(data.getDate()); //当天

    //计算某日是本月第几周
    let mydate = new Date(year, month - 1, day);
    let weekday = mydate.getDay(); //获取该日是星期几，0代表星期日//今天本周的第几天
    let weekno = Math.ceil((day + 6 - weekday) / 7); // 本月第几周

    let weekStartDate = new Date(year, nowMonth, day + 1 - weekday);
    let weekEndDate = new Date(year, nowMonth, day + 7 - weekday);
    return [format('yyyy-MM-dd HH:mm:ss', weekStartDate), format('yyyy-MM-dd HH:mm:ss', weekEndDate)];
}

/**
 * 获得本月的开始与结束日期
 * 返回如：[ "2022-10-01 14:01:42", "2022-10-31 00:00:00" ]
 */
const getNowMonthDate = () => {
    // 获取当前月的第一天
    var start = new Date();
    start.setDate(1);
    // 获取当前月的最后一天
    var date = new Date();
    var currentMonth = date.getMonth();
    var nextMonth = ++currentMonth;
    var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
    var oneDay = 1000 * 60 * 60 * 24;
    var end = new Date(nextMonthFirstDay - oneDay);

    return [format('yyyy-MM-dd HH:mm:ss', start), format('yyyy-MM-dd HH:mm:ss', end)]
}
</script>

<style lang="less" scoped>
span {
    display: inline-block;
    text-align: right;
    width: 300px;
}

div {
    margin: 10px 0px;
}
</style>