原生JS如何将video.currentTime格式化为分:秒形式显示

核心处理逻辑 #

video.currentTime原生返回值是以秒为单位的浮点数，要转换成00:10这类补零的分秒格式，按3步处理即可：

• 对返回的秒数做向下取整，去掉小数位
• 用总秒数计算对应分钟数、剩余秒数：总秒数除以60取整得分钟数，总秒数对60取余得剩余秒数
• 对分钟、秒数单独做两位数补零，不足两位时前面补0，最后用冒号拼接

可直接替换的实现代码 #

video.ontimeupdate = () => {
  // 取整去除小数部分
  const totalSec = Math.floor(video.currentTime)
  // 计算分、秒
  const minutes = Math.floor(totalSec / 60)
  const seconds = totalSec % 60
  // 补零后赋值
  duration.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}

旧环境兼容写法 #

如果需要兼容不支持padStart方法的老旧浏览器，可以自己实现两位数补零逻辑：

// 数字转两位字符串，不足10时前面补0
const toTwoDigit = (num) => num < 10 ? `0${num}` : String(num)

video.ontimeupdate = () => {
  const totalSec = Math.floor(video.currentTime)
  const minutes = Math.floor(totalSec / 60)
  const seconds = totalSec % 60
  duration.textContent = `${toTwoDigit(minutes)}:${toTwoDigit(seconds)}`
}

内容的提问来源于stack exchange，提问作者blueCrafter6