vue converts seconds into "hour, minute and second" format instance code

1. Use native JS Date library

In this case, formatting time into the required string is a relatively common requirement. Here we can useJavaScriptNativeDatelibrary to implement.

The specific steps are as follows:

1. Convert seconds to milliseconds

First, we need to convert the given number of seconds into milliseconds, which can be achieved by multiplying by 1000.

let time = 1485; // 1485 secondslet ms = time * 1000; // 1485000millisecond

2. Construct the Date object

Then, we can useDateConstructor to create a new oneDateExample.

let time = 1485; // 1485 secondslet ms = time * 1000; // 1485000mslet date = new Date(ms);

3. Format time

Finally, we can use the method on the Date prototype to format the time, for examplegetFullYear()Method to get the year,getMonth()Method to get the month,getDay()Method to get date, etc.

For converting seconds into time, minute and second format, we can implement it as follows:

let time = 1485; // 1485 secondslet ms = time * 1000; // 1485000mslet date = new Date(ms);

// Note that here is the getUTCHours() method used, which converts to UTC (coordinated Universal Time) time hourslet hour = (); 
// let hour = (); If you use the getHours() method directly, the time, minute and second format will be 8 hours longer (in China, the East Eighth Zone time is basically used), and the getHours() method will add the current time zone.let minute = ();
let second = ();

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

(formatTime); // "00:24:45"

In the example above, we passgetUTCHours(), getMinutes(), and getSeconds()Methods to obtain the number of hours, minutes and seconds of time and usepadStart()function to set them to two digits.

2. Use

It's a lightweightJavaScriptDate parsing and formatting library, it is perfect forrapid development in projects.

useIt is very simple to format the time, we can achieve it through the following steps:

1. Installation

First, inInstall in the project. You can use the npm package manager for installation:

npm install dayjs

Or use CDN to introduce itlibrary file:

<script src="/npm/dayjs"></script>

2. Import

existImporting in componentsand bind it to the component'sdatamiddle:

import dayjs from 'dayjs';

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

3. Format time

Finally, we can passProvidedformat()Function to format time.

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

In the above example, we created aInstance, take the time required to format as a parameter to its constructor and useformat()The function converts it to the desired format (here is "HH:mm:ss").

3. Expand

The vue front desk requires a time format that users can understand, such as the common "2023-04-27 12:02:35", but the background database requires a time format such asLocalDateTime("2021-04-27T12:02:35") or Date type, if the data is not processed and displayed directly, it will definitely have poor readability.

Let’s introduce the front-end vue processing method, which is in the vue projectCreate a filter in to format the time.

('dataFormat', function (originVal) {
  const dt = new Date(originVal)
  const y = ()
  const m = (() + 1 + '').padStart(2, '0')
  const d = (() + '').padStart(2, '0')
 
  const hh = (() + '').padStart(2, '0')
  const mm = (() + '').padStart(2, '0')
  const ss = (() + '').padStart(2, '0')
  // yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

Just reference directly where formatting is required, hereelementuiTable references in as an example

&lt;el-table-column label="Expiration date"&gt;
    &lt;template slot-scope="scope"&gt;{{ | dataFormat}}&lt;/template&gt;
&lt;/el-table-column&gt;

Supplement: vue seconds are converted into hours, minutes, and seconds instances

if ( === 200) {
        // timeLong Unit: seconds        let durationHour = `${parseInt( / 3600)}Hour `
        let durationMi = `${parseInt( / 60)}minute `
        const durationSecond = `${parseInt( % 60)}Second `
        // const durationSecond = parseInt(( - ()) * 60)
        durationHour = parseFloat(durationHour) &gt; 0 ? durationHour : ''
        durationMi = parseFloat(durationMi) &gt; 0 ? durationMi : ''
         = {
          ...,
          startAndEndTime: `${}-${}`, // Start/End Time          duration: `${durationHour}${durationMi}${durationSecond}` // Long duration of the tour        }
         = 
      }
       = false
    },

In minutes, for example 1.5 minutes

if ( === 200) {
        let durationHour = `${parseInt( / 60)}Hour `
        let durationMi = `${parseInt( % 60)}minute `
        const durationSecond = parseInt(( - ()) * 60)
        durationHour = parseFloat(durationHour) &gt; 0 ? durationHour : ''
        durationMi = parseFloat(durationMi) &gt; 0 ? durationMi : ''
         = {
          ...,
          startAndEndTime: `${}-${}`, // Start/End Time          duration: `${durationHour}${durationMi}${durationSecond}Second` // Long duration of the tour        }
         = 
      }

Summarize

This is the article about converting vue seconds into "hour, minute and second" format. For more related content on vue seconds, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!