快捷導(dǎo)航

JS如何將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳

更新時(shí)間：2023年08月18日 09:46:06 作者：大大

這篇文章主要介紹了js將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳超詳細(xì),通過(guò)實(shí)例代碼介紹了JS時(shí)間戳轉(zhuǎn)換方式，需要的朋友可以參考下

js將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳超詳細(xì)

獲取當(dāng)前時(shí)間并轉(zhuǎn)化成時(shí)間戳

 
    var date = new Date()
    console.log(date) // Tue Aug 16 2022 14:52:09 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
    var timeStamp = Date.parse(date)
    console.log(timeStamp) // 1660632697000

轉(zhuǎn)化指定'年:月'為時(shí)間戳，日會(huì)默認(rèn)取1號(hào)0點(diǎn)0分

    var date = '2022-8'
    var timeStamp = Date.parse(date)
    console.log(timeStamp) // 1659283200000 轉(zhuǎn)回去是2022-08-01 00:00:00

轉(zhuǎn)化指定'年:月:日'為時(shí)間戳，時(shí)間默認(rèn)0點(diǎn)0分

    var date = '2022-8-16'
    var timeStamp = Date.parse(date)
    console.log(timeStamp) // 1660579200000 轉(zhuǎn)回去是2022-08-16 00:00:00

轉(zhuǎn)化指定'年:月:日時(shí):分'為時(shí)間戳,秒默認(rèn)為0

    var date = '2022-8-16 12:10'
    var timeStamp = Date.parse(date)
    console.log(timeStamp) // 1660623000000 轉(zhuǎn)回去是2022-08-16 12:10:00

轉(zhuǎn)化指定'年-月-日時(shí):分:秒'為時(shí)間戳

    var date = '2022-8-16 12:10:30'
    var timeStamp = Date.parse(date)
    console.log(timeStamp) // 1660623000000 轉(zhuǎn)回去是2022-08-16 12:10:30

獲取當(dāng)前年月日時(shí)分秒并轉(zhuǎn)化為時(shí)間戳，三種方式（標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)時(shí)間戳）

let date = new Date()//獲取標(biāo)準(zhǔn)時(shí)間 //Tue Aug 16 2022 15:06:24 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
//方式一
let timeStamp = date.getTime()//轉(zhuǎn)時(shí)間戳
//方式二
let timeStamp = date.valueOf()
//方式三
let timeStamp = Date.parse(date)
console.log(timeStamp) // 1606705009000

JS時(shí)間戳轉(zhuǎn)換方式示例詳解

前言

在js中將時(shí)間戳轉(zhuǎn)換為常用的時(shí)間格式，有三種主要的方式
1、使用JS中已有的函數(shù)，例如getFullYear(),getMonth()等，將時(shí)間戳直接轉(zhuǎn)換成對(duì)應(yīng)的年月；
2、創(chuàng)建時(shí)間過(guò)濾器，在其他的頁(yè)面中直接調(diào)用該過(guò)濾器，轉(zhuǎn)換時(shí)間戳；
3、使用day.js，將時(shí)間戳轉(zhuǎn)換成常用的時(shí)間寫法
4、本文以vue2和vue3兩個(gè)后臺(tái)管理系統(tǒng)中的下單時(shí)間為例，將原本的時(shí)間戳轉(zhuǎn)換為年月日的形式，其中vue2使用js和element ui，vue3使用TS和element-plus

1、js 時(shí)間戳轉(zhuǎn)日期（可直接復(fù)制）

    // 時(shí)間戳 
    let timestamp = 1662537367
    // 此處時(shí)間戳以毫秒為單位
    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();//時(shí)間戳
console.log(nowTime) // 獲取當(dāng)前時(shí)間的時(shí)間戳

2、在main.js中創(chuàng)建過(guò)濾器

示例：后臺(tái)管理系統(tǒng)，vue2 + JS + element ui，將下單時(shí)間的時(shí)間戳轉(zhuǎn)換為年月日的形式

（1）main.js中，創(chuàng)建過(guò)濾器將其掛載到vue上

注意：我這邊后臺(tái)返回的數(shù)據(jù)需要進(jìn)行單位換算，所以originVal * 1000，具體情況具體分析，不同單位的數(shù)據(jù)請(qǐng)自行調(diào)整

import Vue from 'vue'
// 創(chuàng)建過(guò)濾器，將秒數(shù)過(guò)濾為年月日，時(shí)分秒，傳參值originVal為毫秒
Vue.filter('dateFormat', function(originVal){
  // 先把傳參毫秒轉(zhuǎn)化為new Date()
  const dt = new Date(originVal * 1000)
  const y = dt.getFullYear()
  // 月份是從0開始,需要+1
  // +''是把數(shù)字轉(zhuǎn)化為字符串,padStart(2,'0')是把字符串設(shè)置為2位數(shù),不足2位則在開頭加'0'
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  return `${y}-${m}-$vvxyksv9kd`
})

（2）頁(yè)面中具體使用

<el-table :data="orderList" border stripe class="mt20">
	<el-table-column label="下單時(shí)間" prop="create_time">
		<template slot-scope="scope">
			{{scope.row.create_time | dateFormat}}
		</template>
	</el-table-column>
</el-table>

3、day.js（鏈接直達(dá)）

（1）三種安裝方式任選其一

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

（2）頁(yè)面中具體使用

示例：后臺(tái)管理系統(tǒng)，vue3 + TS + element-plus，將下單時(shí)間的時(shí)間戳轉(zhuǎn)換為年月日的形式
使用前：

使用后：

① html部分

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

②獲取到的數(shù)據(jù)

③TS部分

對(duì)拿到的數(shù)據(jù)中的創(chuàng)建時(shí)間進(jìn)行轉(zhuǎn)換，其中dayjs()中攜帶需要轉(zhuǎn)換的時(shí)間戳參數(shù)，format()中攜帶所期待轉(zhuǎn)換成的形式

// 引入
import { dayjs } from "element-plus";
interface IOrderList {
  order_number: string; // 訂單編號(hào)
  create_time: number; // 下單時(shí)間
}
const orderList = reactive<IOrderList[]>([]);
// 獲取訂單數(shù)據(jù)
const getOrderList = async () => {
  orderList.length = 0;
  let orders = await ordersAPI(pageInfo.value);
// 對(duì) orders.data.goods進(jìn)行遍歷，dayjs()中攜帶需要轉(zhuǎn)換的時(shí)間戳參數(shù)，format()中攜帶所期待轉(zhuǎn)換成的形式
  orders.data.goods.forEach((el: any) => {
    el.create_time = dayjs(el.create_time * 1000).format("YYYY-MM-DD");
  });
  orderList.push(...orders.data.goods);
};
getOrderList();

到此這篇關(guān)于JS時(shí)間戳轉(zhuǎn)換方式的文章就介紹到這了,更多相關(guān)js時(shí)間戳轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: