• <table id="cjgd4"><strike id="cjgd4"></strike></table>
    <acronym id="cjgd4"><strong id="cjgd4"><address id="cjgd4"></address></strong></acronym><p id="cjgd4"><strong id="cjgd4"><small id="cjgd4"></small></strong></p>
    <acronym id="cjgd4"></acronym><table id="cjgd4"><strike id="cjgd4"></strike></table><td id="cjgd4"></td><acronym id="cjgd4"></acronym><acronym id="cjgd4"></acronym>

            溫馨提示×

            溫馨提示×

            您好,登錄后才能下訂單哦!

            密碼登錄×
            登錄注冊×
            其他方式登錄
            點擊 登錄注冊 即表示同意《億速云用戶服務條款》

            幾種JS時間戳轉換方式介紹

            發布時間:2023-08-28 17:43:40 來源:億速云 閱讀:108 作者:栢白 欄目:開發技術

            本篇文章和大家了解一下幾種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,將下單時間的時間戳轉換為年月日的形式
            使用前:

            幾種JS時間戳轉換方式介紹

            使用后:

            幾種JS時間戳轉換方式介紹

            ① html部分

            npm install dayjs
            cnpm install dayjs -S
            yarn add dayjs

            ②獲取到的數據

            幾種JS時間戳轉換方式介紹

            ③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時間戳轉換方式介紹的簡略介紹,當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多,歡迎關注億速云行業資訊頻道哦!

            向AI問一下細節

            免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

            js
            AI

            国产片婬乱一级毛片视频|女同另类专区久久精品|色综合久久综合|欧美日韩在线旡码视频一区
          1. <table id="cjgd4"><strike id="cjgd4"></strike></table>
            <acronym id="cjgd4"><strong id="cjgd4"><address id="cjgd4"></address></strong></acronym><p id="cjgd4"><strong id="cjgd4"><small id="cjgd4"></small></strong></p>
            <acronym id="cjgd4"></acronym><table id="cjgd4"><strike id="cjgd4"></strike></table><td id="cjgd4"></td><acronym id="cjgd4"></acronym><acronym id="cjgd4"></acronym>