vue將秒數(shù)轉(zhuǎn)成"時分秒"格式實例代碼

更新時間：2023年06月01日 11:08:27 作者：No8g攻城獅

在項目中,請求后臺接口返回的值是秒,這篇文章主要給大家介紹了關(guān)于vue將秒數(shù)轉(zhuǎn)成"時分秒"格式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、使用原生JS的Date庫

在Vue.js中，將時間格式化成所需的字符串是一個較為普遍的需求。在這里，我們可以利用JavaScript原生的Date庫來實現(xiàn)。

具體步驟如下：

1.將秒數(shù)轉(zhuǎn)換成毫秒數(shù)

首先，我們需要將給定的秒數(shù)轉(zhuǎn)化成毫秒數(shù)，這可以通過乘以1000來實現(xiàn)。

let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒

2.構(gòu)造Date對象

然后，我們可以使用Date構(gòu)造函數(shù)來創(chuàng)建一個新的Date實例。

let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒
let date = new Date(ms);

3.格式化時間

最后，我們可以使用Date原型上的方法來格式化時間，例如使用 getFullYear() 方法獲取年份， getMonth() 方法獲取月份， getDay() 方法獲取日期等等。

對于將秒數(shù)轉(zhuǎn)換為時分秒格式，我們可以如下實現(xiàn)：

let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒
let date = new Date(ms);

// 注意這里是使用的getUTCHours()方法，轉(zhuǎn)換成UTC(協(xié)調(diào)世界時)時間的小時
let hour = date.getUTCHours(); 
// let hour = date.getHours(); 如果直接使用getHours()方法，則得到的時分秒格式會多出來8個小時（在國內(nèi)開發(fā)基本都是使用的是東八區(qū)時間），getHours()方法會把當前的時區(qū)給加上。
let minute = date.getMinutes();
let second = date.getSeconds();

let formatTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;

console.log(formatTime); // "00:24:45"

在上面的例子中，我們通過 getUTCHours()、getMinutes()和getSeconds() 方法獲取到時間的小時數(shù)、分鐘數(shù)和秒數(shù)，并使用 padStart() 函數(shù)來將它們設置成兩位數(shù)。

二、使用day.js

Day.js是一種輕量級的JavaScript日期解析和格式化庫，它非常適合在Vue.js的項目中進行快速開發(fā)。

使用Day.js來格式化時間非常簡單，我們可以通過以下步驟來實現(xiàn)：

1.安裝Day.js

首先，在Vue.js項目中安裝Day.js?？梢允褂胣pm包管理器進行安裝：

npm install dayjs

或者使用CDN方式引入Day.js的庫文件：

<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>

2.導入Day.js

在Vue.js組件中導入Day.js，并將它綁定到組件的data中：

import dayjs from 'dayjs';

export default {
  data() {
    return {
      dayjs: dayjs,
      time: 1485
    };
  }
}

3.格式化時間

最后，我們可以通過Day.js提供的 format() 函數(shù)來格式化時間。

<template>
  <div>
    {{dayjs(time * 1000).format('HH:mm:ss')}}
  </div>
</template>

在上面的例子中，我們通過dayjs函數(shù)創(chuàng)建了一個Day.js實例，將需要格式化的時間作為其構(gòu)造函數(shù)的參數(shù)，并使用 format() 函數(shù)將其轉(zhuǎn)換成所需的格式（在這里是“HH:mm:ss”）。

三、拓展

vue前臺需要用戶能看得懂的時間格式如常見的“2023-04-27 12:02:35”，但是后臺數(shù)據(jù)庫則需要時間格式如 LocalDateTime（“2021-04-27T12:02:35”）或者Date類型的，如果數(shù)據(jù)不經(jīng)過處理，直接顯示，肯定可讀性差。

下邊就介紹一下前臺vue處理方式，就是在vue項目的 main.js 中創(chuàng)建一個過濾器，把時間格式化處理。

Vue.filter('dataFormat', function (originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
 
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  // yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-$wppm3vysvbp ${hh}:${mm}:${ss}`
})

在需要進行格式化處理的地方直接引用即可，此處以 elementui 中的表格引用為例

<el-table-column label="使用有效期">
    <template slot-scope="scope">{{scope.row.beginTime | dataFormat}}</template>
</el-table-column>

補充：vue 秒轉(zhuǎn)化為小時、分鐘、秒實例

if (res.code === 200) {
        // timeLong 單位：秒
        let durationHour = `${parseInt(res.data.timeLong / 3600)}小時 `
        let durationMi = `${parseInt(res.data.timeLong / 60)}分鐘 `
        const durationSecond = `${parseInt(res.data.timeLong % 60)}秒 `
        // const durationSecond = parseInt((res.data.timeLong - Math.floor(res.data.timeLong)) * 60)
        durationHour = parseFloat(durationHour) > 0 ? durationHour : ''
        durationMi = parseFloat(durationMi) > 0 ? durationMi : ''
        this.rowDetailInfo = {
          ...res.data,
          startAndEndTime: `${res.data.startTime}-${res.data.endTime}`, // 開始/結(jié)束時間
          duration: `${durationHour}${durationMi}${durationSecond}` // 巡更時長
        }
        this.rowDetailList = res.data.danVOS
      }
      this.loadingShowXGDetail = false
    },

以分鐘為單位,譬如 1.5分鐘

if (res.code === 200) {
        let durationHour = `${parseInt(res.data.timeLong / 60)}小時 `
        let durationMi = `${parseInt(res.data.timeLong % 60)}分鐘 `
        const durationSecond = parseInt((res.data.timeLong - Math.floor(res.data.timeLong)) * 60)
        durationHour = parseFloat(durationHour) > 0 ? durationHour : ''
        durationMi = parseFloat(durationMi) > 0 ? durationMi : ''
        this.rowDetailInfo = {
          ...res.data,
          startAndEndTime: `${res.data.startTime}-${res.data.endTime}`, // 開始/結(jié)束時間
          duration: `${durationHour}${durationMi}${durationSecond}秒` // 巡更時長
        }
        this.rowDetailList = res.data.danVOS
      }