如何使用JavaScript将秒转换为HH-MM-SS字符串?
当前回答
export const secondsToHHMMSS = (seconds) => {
const HH = `${Math.floor(seconds / 3600)}`.padStart(2, '0');
const MM = `${Math.floor(seconds / 60) % 60}`.padStart(2, '0');
const SS = `${Math.floor(seconds % 60)}`.padStart(2, '0');
return [HH, MM, SS].join(':');
};
其他回答
我遇到了一些人提到的情况,其中秒的数量超过了一天。以下是@Harish Anchu评分最高的答案的改编版本,该答案解释了更长的时间:
function secondsToTime(seconds) {
const arr = new Date(seconds * 1000).toISOString().substr(11, 8).split(':');
const days = Math.floor(seconds / 86400);
arr[0] = parseInt(arr[0], 10) + days * 24;
return arr.join(':');
}
例子:
secondsToTime(101596) // outputs '28:13:16' as opposed to '04:13:16'
var timeInSec = "661"; //even it can be string
String.prototype.toHHMMSS = function () {
/* extend the String by using prototypical inheritance */
var seconds = parseInt(this, 10); // don't forget the second param
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
seconds = seconds - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
}
alert("5678".toHHMMSS()); // "01:34:38"
console.log(timeInSec.toHHMMSS()); //"00:11:01"
我们可以把这个函数写得更短更清晰,但这会降低可读性,所以我们要把它写得尽可能简单,尽可能稳定。
或者你可以在这里检查一下:
对于HH:MM:SS的特殊情况。MS (eq: "00:04:33.637"), FFMPEG用来指定毫秒。
[-] [HH: MM: SS(打烊……) HH表示小时数,MM表示分钟数 最大值为2位,SS为最大值为2的秒数 位数。最后的m表示SS的十进制值。
/* HH:MM:SS.MS to (FLOAT)seconds ---------------*/ function timerToSec(timer){ let vtimer = timer.split(":") let vhours = +vtimer[0] let vminutes = +vtimer[1] let vseconds = parseFloat(vtimer[2]) return vhours * 3600 + vminutes * 60 + vseconds } /* Seconds to (STRING)HH:MM:SS.MS --------------*/ function secToTimer(sec){ let o = new Date(0) let p = new Date(sec*1000) return new Date(p.getTime()-o.getTime()) .toISOString() .split("T")[1] .split("Z")[0] } /* Example: 7hours, 4 minutes, 33 seconds and 637 milliseconds */ const t = "07:04:33.637" console.log( t + " => " + timerToSec(t) + "s" ) /* Test: 25473 seconds and 637 milliseconds */ const s = 25473.637 // "25473.637" console.log( s + "s => " + secToTimer(s) )
示例使用,毫秒传输计时器:
/* Seconds to (STRING)HH:MM:SS.MS --------------*/ function secToTimer(sec){ let o = new Date(0) let p = new Date(sec*1000) return new Date(p.getTime()-o.getTime()) .toISOString() .split("T")[1] .split("Z")[0] } let job, origin = new Date().getTime() const timer = () => { job = requestAnimationFrame(timer) OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000) } requestAnimationFrame(timer) span {font-size:4rem} <span id="OUT"></span> <br> <button onclick="origin = new Date().getTime()">RESET</button> <button onclick="requestAnimationFrame(timer)">RESTART</button> <button onclick="cancelAnimationFrame(job)">STOP</button>
绑定到媒体元素的示例用法
/* Seconds to (STRING)HH:MM:SS.MS --------------*/ function secToTimer(sec){ let o = new Date(0) let p = new Date(sec*1000) return new Date(p.getTime()-o.getTime()) .toISOString() .split("T")[1] .split("Z")[0] } VIDEO.addEventListener("timeupdate", function(e){ OUT.textContent = secToTimer(e.target.currentTime) }, false) span {font-size:4rem} <span id="OUT"></span><br> <video id="VIDEO" width="400" controls autoplay> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>
在问题之外,那些用php编写的函数:
<?php
/* HH:MM:SS to (FLOAT)seconds ------------------*/
function timerToSec($timer){
$vtimer = explode(":",$timer);
$vhours = (int)$vtimer[0];
$vminutes = (int)$vtimer[1];
$vseconds = (float)$vtimer[2];
return $vhours * 3600 + $vminutes * 60 + $vseconds;
}
/* Seconds to (STRING)HH:MM:SS -----------------*/
function secToTimer($sec){
return explode(" ", date("H:i:s", $sec))[0];
}
这里没有一个答案满足我的要求,因为我想能够处理
大量的秒(天),以及 负数
尽管OP不要求这些,但是覆盖边缘情况是一个很好的实践,特别是当它不需要花费太多精力时。
很明显,当他说秒的时候,OP的意思是秒的数量。为什么要把函数固定在字符串上?
function secondsToTimeSpan(seconds) {
const value = Math.abs(seconds);
const days = Math.floor(value / 1440);
const hours = Math.floor((value - (days * 1440)) / 3600);
const min = Math.floor((value - (days * 1440) - (hours * 3600)) / 60);
const sec = value - (days * 1440) - (hours * 3600) - (min * 60);
return `${seconds < 0 ? '-':''}${days > 0 ? days + '.':''}${hours < 10 ? '0' + hours:hours}:${min < 10 ? '0' + min:min}:${sec < 10 ? '0' + sec:sec}`
}
secondsToTimeSpan(0); // => 00:00:00
secondsToTimeSpan(1); // => 00:00:01
secondsToTimeSpan(1440); // => 1.00:00:00
secondsToTimeSpan(-1440); // => -1.00:00:00
secondsToTimeSpan(-1); // => -00:00:01
简单的函数转换秒为hh:mm:ss格式:
function getHHMMSSFromSeconds(totalSeconds) {
if (!totalSeconds) {
return '00:00:00';
}
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor(totalSeconds % 3600 / 60);
const seconds = totalSeconds % 60;
const hhmmss = padTo2(hours) + ':' + padTo2(minutes) + ':' + padTo2(seconds);
return hhmmss;
}
// function to convert single digit to double digit
function padTo2(value) {
if (!value) {
return '00';
}
return value < 10 ? String(value).padStart(2, '0') : value;
}
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- MySQL中两个日期之间的差异
- 如何通过history. pushstate获得历史变化的通知?
- 在Bash中获取日期(比当前时间早一天)
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 我怎么能计算在打字稿2日期之间的时间