如何将字符串小时转换为"hh：mm：ss"格式？

Question

我正在获得我的谷歌 api 响应，持续时间为 1 小时 13 分钟，我需要将其隐蔽为'hh:mm:ss'格式。如何在 React js 中转换它？ 响应：

distance: {text: "47.8 km", value: 47790}
duration:
text: "1 hour 13 mins"
value: 4378
__proto__: Object
status: "OK"

Answer 1

似乎提供的值：44790 和4378是米和秒。现在你已经有了秒作为数字，你可以做各种各样的事情来获得你想要的格式。有很多javascript片段可以为你做到这一点：

function convertHMS(value) {
const sec = parseInt(value, 10); // convert value to number if it's string
let hours   = Math.floor(sec / 3600); // get hours
let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
let seconds = sec - (hours * 3600) - (minutes * 60); //  get seconds
// add 0 if value < 10
if (hours   < 10) {hours   = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
}
const yourTime = convertHMS(4378); // 4378 seconds
// yourTime is 01:12:58
console.log(yourTime);

如果你有一个基本的/初级的Javascript知识，在这个脚本中唯一可能有趣的事情是Math.floor((和parseInt((。

致谢：https://www.4codev.com/javascript/convert-seconds-to-time-value-hours-minutes-seconds-idpx6943853585885165320.html 在这种情况下，您可以在任何地方找到这~10行，但是经过几秒钟的搜索，我在这里找到了它们。

在添加某种为您完成工作的库之前，请务必先尝试在纯 JS 中解决您的问题，因为您不想为可以在 ~10 行纯 JS 中完成的事情添加一个完整的库。当然，普通的JS在React =中运行良好

。如果您需要支持 IE6 - IE10，您可能希望替换 const 并让 var(尽管如果您从业务角度不必支持这些浏览器，我不鼓励支持这些浏览器(。

编辑：我对在这里回答问题相当陌生，所以我将代码转换为代码片段。

Answer 2

很好的解决方案，Sapulidi。我使用了您的代码，并进行了轻微修改。为任何感兴趣的人发帖。

• 在打字稿中
• 小时数仅在有>0 小时时显示

const millisecondsToHHMMSS = (duration: number) => {
const sec = Math.round(duration / 1000);
const hours = Math.floor(sec / 3600); // get hours
const minutes = Math.floor((sec - hours * 3600) / 60); // get minutes
const seconds = sec - hours * 3600 - minutes * 60; //  get seconds
// add 0 if value < 10
let sHours = hours > 0 ? `${hours}:` : '';
let sMinutes = `${minutes}`;
let sSeconds = `${seconds}`;
if (minutes < 10) {
sMinutes = '0' + sMinutes;
}
if (seconds < 10) {
sSeconds = '0' + sSeconds;
}
return sHours + sMinutes + ':' + sSeconds;
// Return is HH:MM:SS
};
let timeWithHours = 12345
let formattedWithHours = millisecondsToHHMMSS(timeWithHours)
let timeWithoutHours = 12345678
let formattedWithoutHours = millisecondsToHHMMSS(timeWithoutHours)
console.log(formattedWithHours)
console.log(formattedWithoutHours)

Answer 3

它与 React 无关。您可以简单地使用瞬间.js

moment(distance.value).format('hh:mm:ss');

Answer 4

您可以使用日期格式库之一(例如 momentjs 或 date-fns(，也可以自己计算。您以秒为单位获得持续时间(似乎4378 seconds(，因此自己计算它不会太费力。

下面是一个示例：

const values = getHoursMinutesAndSeconds(4378);
console.log(values);
console.log(`${zeroPadding(values.hours, 2)}:${zeroPadding(values.minutes, 2)}:${zeroPadding(values.seconds, 2)}`);
function getHoursMinutesAndSeconds (totalSeconds) {
// step 1: create seconds and hoursAndMinutes (minutes, but might be larger than 60)
const hoursAndMinutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
// step 2: create minutes and hours from hoursAndMinutes
const hours = Math.floor(hoursAndMinutes / 60);
const minutes = hoursAndMinutes % 60;
return { hours, minutes, seconds };
}
function zeroPadding (number, length) {
return String(number).padStart(length, '0');
}