Question

我正在获取google 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

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

pmap

Answer 2

您可以使用日期格式库之一（例如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');
}

Answer 3

似乎提供的值：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);

如果您具有基本的/开始的Java知识，那么在此脚本中唯一可能很有趣的事情是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 4

很好的解决方案，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)

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

4 个答案: