快捷導(dǎo)航

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

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

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

一、使用原生JS的Date庫(kù)

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

具體步驟如下：

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

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

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

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

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

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

3.格式化時(shí)間

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

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

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

// 注意這里是使用的getUTCHours()方法，轉(zhuǎn)換成UTC(協(xié)調(diào)世界時(shí))時(shí)間的小時(shí)
let hour = date.getUTCHours(); 
// let hour = date.getHours(); 如果直接使用getHours()方法，則得到的時(shí)分秒格式會(huì)多出來(lái)8個(gè)小時(shí)（在國(guó)內(nèi)開發(fā)基本都是使用的是東八區(qū)時(shí)間），getHours()方法會(huì)把當(dāng)前的時(shí)區(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"

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

二、使用day.js

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

使用Day.js來(lái)格式化時(shí)間非常簡(jiǎn)單，我們可以通過(guò)以下步驟來(lái)實(shí)現(xiàn)：

1.安裝Day.js

首先，在Vue.js項(xiàng)目中安裝Day.js。可以使用npm包管理器進(jìn)行安裝：

npm install dayjs

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

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

2.導(dǎo)入Day.js

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

import dayjs from 'dayjs';

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

3.格式化時(shí)間

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

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

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

三、拓展

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

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

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}-$ublnpf9mb ${hh}:${mm}:${ss}`
})

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

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

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

if (res.code === 200) {
        // timeLong 單位：秒
        let durationHour = `${parseInt(res.data.timeLong / 3600)}小時(shí) `
        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é)束時(shí)間
          duration: `${durationHour}${durationMi}${durationSecond}` // 巡更時(shí)長(zhǎng)
        }
        this.rowDetailList = res.data.danVOS
      }
      this.loadingShowXGDetail = false
    },

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

if (res.code === 200) {
        let durationHour = `${parseInt(res.data.timeLong / 60)}小時(shí) `
        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é)束時(shí)間
          duration: `${durationHour}${durationMi}${durationSecond}秒` // 巡更時(shí)長(zhǎng)
        }
        this.rowDetailList = res.data.danVOS
      }

總結(jié)

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

您可能感興趣的文章: