JS时间戳转换方式示例详解
目录
  • 前言
  • 1、js 时间戳转日期（可直接复制）
  • 2、在main.js中创建过滤器
  • 3、day.js（链接直达）

前言

在js中将时间戳转换为常用的时间格式，有三种主要的方式
1、使用JS中已有的函数，例如getFullYear(),getMonth()等，将时间戳直接转换成对应的年月；
2、创建时间过滤器，在其他的页面中直接调用该过滤器，转换时间戳；
3、使用day.js，将时间戳转换成常用的时间写法
4、本文以vue2和vue3两个后台管理系统中的下单时间为例，将原本的时间戳转换为年月日的形式，其中vue2使用js和element ui，vue3使用TS和element-plus

1、js 时间戳转日期（可直接复制）

    // 时间戳
    let timestamp = 1662537367
    // 此处时间戳以毫秒为单位
    let date = new Date(parseInt(timestamp) * 1000);
    let Year = date.getFullYear();
    let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
    let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
    console.log(GMT)  // 2022-09-07 15:56:07

附加

let nowTime = new Date().valueOf();//时间戳
console.log(nowTime) // 获取当前时间的时间戳

2、在main.js中创建过滤器

示例：后台管理系统，vue2 + JS + element ui，将下单时间的时间戳转换为年月日的形式

（1）main.js中，创建过滤器将其挂载到vue上

注意：我这边后台返回的数据需要进行单位换算，所以originVal * 1000，具体情况具体分析，不同单位的数据请自行调整

import Vue from 'vue'
// 创建过滤器，将秒数过滤为年月日，时分秒，传参值originVal为毫秒
Vue.filter('dateFormat', function(originVal){
  // 先把传参毫秒转化为new Date()
  const dt = new Date(originVal * 1000)
  const y = dt.getFullYear()
  // 月份是从0开始,需要+1
  // +''是把数字转化为字符串,padStart(2,'0')是把字符串设置为2位数,不足2位则在开头加'0'
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  return `${y}-${m}-${d}`
})

（2）页面中具体使用

<el-table :data="orderList" border stripe class="mt20">
	<el-table-column label="下单时间" prop="create_time">
		<template slot-scope="scope">
			{{scope.row.create_time | dateFormat}}
		</template>
	</el-table-column>
</el-table>

3、day.js（链接直达）

（1）三种安装方式任选其一

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

（2）页面中具体使用

示例：后台管理系统，vue3 + TS + element-plus，将下单时间的时间戳转换为年月日的形式
使用前：

使用后：

① html部分

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

②获取到的数据

③TS部分

对拿到的数据中的创建时间进行转换，其中dayjs()中携带需要转换的时间戳参数，format()中携带所期待转换成的形式

// 引入
import { dayjs } from "element-plus";
interface IOrderList {
  order_number: string; // 订单编号
  create_time: number; // 下单时间
}
const orderList = reactive<IOrderList[]>([]);
// 获取订单数据
const getOrderList = async () => {
  orderList.length = 0;
  let orders = await ordersAPI(pageInfo.value);
// 对 orders.data.goods进行遍历，dayjs()中携带需要转换的时间戳参数，format()中携带所期待转换成的形式
  orders.data.goods.forEach((el: any) => {
    el.create_time = dayjs(el.create_time * 1000).format("YYYY-MM-DD");
  });
  orderList.push(...orders.data.goods);
};
getOrderList();

到此这篇关于JS时间戳转换方式的文章就介绍到这了,更多相关js时间戳转换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS获取时间的相关函数及时间戳与时间日期之间的转换

    时间戳和时间日期的转换是常见的操作,下面就通过代码实例介绍一下如何实现它们之间的相互转换. 在没学习本文之前先给大家介绍下javascript中Date()构造函数参数: 关于Date对象大家想必一定不陌生,使用Date()构造函数创建一个时间对象是最基本的操作了,例如: var theDate=new Date(); theDate.getDate(); 使用以上代码可以获取当前日期的天. 上面是对于Date()构造函数最简单的应用了,Date对象具有多种构造函数,下面简单列举如下: new

  • js时间戳与日期格式之间相互转换

    本文实例为大家分享了js时间戳与日期格式之间相互转换的代码,供大家参考,具体内容如下 1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 2. 更多好用的方法可以在这查到 -> http://www.w3school.com.cn/jsref/jsref_obj_date.asp */ date.getFullYear(); // 获取完整的年份(

  • js时间戳与日期格式之间转换详解

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 将时间戳转换为日期格式 var date = new Date(时间戳);获取一个时间对象. 下面是获取时间日期的方法 下面是获取时间日期的方法. date.getFullYear();//获取完整的年份(4位,1970) date.getMonth();//获取月份(0-11,0代表1月,用的时候记得加上1) date.getDate();//获取日(1-31) date.getTime();//获取时间(从

  • Vue.js 时间转换代码及时间戳转时间字符串

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()

  • JS的时间格式化和时间戳转换函数示例详解

    JS的时间格式化和时间戳转换函数 //格式化时间 function dateFormat(fmt,date){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds

  • js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)

    如下所示: function formatDate(date,fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length)); } let o = { 'M+':date.getMonth() + 1, 'd+':date.getDate(), 'h+':date.getHours(), 'm+':date.getMinutes(), 's+'

  • javascript时间戳和日期字符串相互转换代码(超简单)

    javascript时间戳和日期字符串相互转换代码(超简单) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> // 获取当前

  • JavaScript时间戳与时间日期间相互转换

    今天在工作中要将获取到的时间转换为时间戳,一时间竟不知道怎么用,于是不得不去查询资料,这里特地做个笔记. 1.将日期转换为时间戳. 要将日期转换为时间戳,首先得先获取到日期,这里可以直接指定日期,或者是使用当前日期.要获取当前日期,我们可以使用new Date()来获取.直接上代码. // (1).将当前日期转换为时间戳. var now = new Date(); console.log(now.getTime()) // 将当前日期转换为时间戳,getTime()方法可返回距1970年1月1

  • JS中原始值和引用值的储存方式示例详解

    在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值 原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number.Stirng.Boolean.Null.Underfined 引用值指的是复合数据类型的值,包括:Object.Function.Array.Date.RegExp 根据数据类型不同,有的变量储存在栈中,有的储存在堆中.具体区别如下: 原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

  • JS中多种方式创建对象详解

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('

  • js 实现验证码输入框示例详解

    js 实现验证码输入框示例详解

    目录 前言 思路 遇到的问题 HTML CSS JS 前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路 我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位

  • C#获取本地IP的四种方式示例详解

    1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos

  • Fabric.js 实现变换视窗示例详解

    Fabric.js 实现变换视窗示例详解

    目录 引言 viewportTransform 缩放 斜切 平移 setViewportTransform(vpt) 引言 fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性. 听上去很高级的样子,但其实这是原生 canvas 就已经存在的东西,fabric.js 的 viewportTransform 也就直接复用了原生 canvas 的 transform() . fabric.js 官方文档上也是这么说的 viewportTransform :Arra

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • Java中动态规则的实现方式示例详解

    背景 业务系统在应用过程中,有时候要处理"经常变化"的部分,这部分需求可能是"业务规则",也可能是"不同的数据处理逻辑",这部分动态规则的问题,往往需要可配置,并对性能和实时性有一定要求. Java不是解决动态层问题的理想语言,在实践中发现主要有以下几种方式可以实现: 表达式语言(expression language) 动态语言(dynamic/script language language),如Groovy 规则引擎(rule engine

  • C++中各种初始化方式示例详解

    前言 本文主要给大家介绍了关于C++初始化方式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. C++小实验测试:下面程序中main函数里a.a和b.b的输出值是多少? #include <iostream> struct foo { foo() = default; int a; }; struct bar { bar(); int b; }; bar::bar() = default; int main() { foo a{}; bar b{}; std::co

随机推荐

其他