在项目中时常会有时间戳需要转化成正常时间显示,每次调用太麻烦,写成函数调用吧

场景一:时间转化时间戳

/**
 * 时间格式 普通时间戳转换时间
 * @param value 时间戳
 */
export function changeTime(value: any) {
  return new Date(value.format('YYYY-MM-DD HH:mm:ss')).getTime();
}

使用范例

modelRef.value.startTime = changeTime(data.startTime);

场景二 时间戳转化时间

不得不提及new Date()这个方法了

//获得当前时间
let now = new Date();

//new Date(时间戳) 格式转化 时间戳转化正常标准化时间
let someTime = new Date(1657521771000);
//结果:Mon Jul 11 2022 14:42:51 GMT+0800 (中国标准时间)

//转化是不够的,还需要一定格式整理,正则走起
let someTime = new Date(initTime).toLocaleString().replace(/:\d{1,2}$/, ' ')

//假如正则不是很了解,反正方法千千万,适合自己最重要
date = new Date(time).getFullYear() + '/' + Number(new Date(time).getMonth() + 1) + '/' + new Date(time).getDate();

//当然在详情页面,一般我们就不用这么麻烦
<p class="field_value">{{ Details?.createTime | date:'yyyy-MM-dd HH:mm' }}</p>

相关其它函数参考:js中日期转换成时间戳 - 百度文库

场景三 一次性转化多个时间戳

需要把后端传来json中几个字段的时间戳都需要转化成正常时间显示,同时,这些key可能不存在

/**
 * 时间格式 时间戳转换时间
 * @param arr 键名数组
 * @param data 原来数据,若含有arr数组中的键名,键值由时间戳转化时间
 */
export function pipeTime(params: any[], data: any) {
  params.map(item => {
    if (data[item]) {
      data[item] = new Date(Number(data[item])).toLocaleString().replace(/:\d{1,2}$/, ' ');
    }
    return item;
  })
  return data
}

使用范例:

//引用过来
import { pipeTime } from '@/utils/array'

const arr = ['createTime', 'payTime']
// data--后端传来整个json列表 element--列表其中一条数据 
// arr--列表某一条中为需要转化的时间戳的key的集合 
 data.forEach(element => {
      element = pipeTime(arr, element);
    });

场景四 结合组件,把正常时间转化为时间戳

提交时间时,整理为时间戳

先举个栗子:

 打印结果 

 一定确保此时时间格式这样子

然后直接调用场景一的方法即可

愿意扩展可以了解:toLocaleDateString()这个方法

场景五 获得当前时间戳或者时间的方法

// 获得当前时间
getNowDate() {
    const myDate = new Date();
    const year = myDate.getFullYear(); // 获取当前年
    const mon = myDate.getMonth() + 1; // 获取当前月
    const date = myDate.getDate(); // 获取当前日
    const hours = myDate.getHours(); // 获取当前小时
    const minutes = myDate.getMinutes(); // 获取当前分钟
    const seconds = myDate.getSeconds(); // 获取当前秒
    const now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
    return now;
  }

// 获得当前时间时间戳
  getTimestamp() {
    return new Date(this.getNowDate()).getTime();
  }

场景六 时间戳的计算

举个栗子

Mon Jun 13 2022 15:29:45 GMT+0800 (中国标准时间):1655105385000

Tue Jun 14 2022 15:29:45 GMT+0800 (中国标准时间):1655191785000

两次时间差一天,那么时间戳差了86400*1000

而86400 = 24*60*60

也就是每多加一天,时间戳多加 24*60*60*1000

应用一:规定时间范围几天

例如在时间规定,退货时间七日内,可选时间开始时间到往后七天,其他时间不可选择

那么

endTime = startTime + 24 * 60 * 60 * 1000 *7 - 1;

提问:为什么要-1?

当然不能算第二天了啊!哈哈哈~

用例:预产期280天,获取当天时间,自动计算预产日期

// 1、此处调用场景五 获得当前时间
// 2、计算天数 item1--怀孕过了多少周 item2--怀孕零多少天 比如 怀了3周2天

dataExpected(item1: any, item2: any) {
    let item = 280 - (Number(item1 * 7) + Number(item2));
    item = item * 24 * 60 * 60 * 1000 // 剩余时间
    const t1 = this.getTimestamp();// 获取当前时间戳
    const t2 = item + t1;// 计算时间戳之和
    if (t2 > 0) {
      const i = {
        expectedDate: new Date(t2)
      }
    }
  }

应用二:规定范围是1天、 1周或者1个月,应用于时间选择器

getTimes() {
    enum DayTime { ALL = 0, DAY = 1, WEEK = 2, MONTH = 3 }
    if (this.btnNum === DayTime.DAY) {
      this.form.value.startTime = new Date(new Date().toLocaleDateString()).getTime();
      this.form.value.endTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
    } else if (this.btnNum === DayTime.WEEK) {
      this.getWeek();
    } else if (this.btnNum === DayTime.MONTH) {
      this.getMounth();
    }
  }
  getWeek() {
    // 按周日为一周的最后一天计算
    const date = new Date();
    // 今天是这周的第几天
    const today = date.getDay();
    // 上周日距离今天的天数(负数表示)
    let stepSunDay = -today + 1;
    // 如果今天是周日
    if (today === 0) {
      stepSunDay = -7;
    }
    // 周一距离今天的天数(负数表示)
    const stepMonday = 7 - today;
    const time = date.getTime();
    const monday = new Date(time + stepSunDay * 24 * 3600 * 1000);
    const sunday = new Date(time + stepMonday * 24 * 3600 * 1000);
    this.startTime = new Date(monday.toLocaleDateString()).getTime();
    this.endTime = new Date(sunday.toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
  }
  // 获取本月的起始时间戳
  getMounth() {
    // 获取当前月的第一天
    const start = new Date().setDate(1);
    // 获取当前月的最后一天
    const date = new Date();
    const currentMonth = date.getMonth() + 1;
    const nextMonthFirstDay = new Date(date.getFullYear(), currentMonth, 1);
    const oneDay = 1000 * 60 * 60 * 24;
    const end = new Date(nextMonthFirstDay.getTime() - oneDay);
    this.startTime = new Date(new Date(start).toLocaleDateString()).getTime();
    this.endTime = new Date(end.toLocaleDateString()).valueOf() + 24 * 60 * 60 * 1000 - 1;

  }

应用场景很多,代码是死的,人是活得,先明白自己能获得的时间是什么格式,要变成什么格式,然后调用方法或者计算就可以了。

注意:时间的格式,有国际化的,有moment数据类型的,有正则获得的,有时间戳的等等

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐