javascript - 如果超过60分钟，如何让计数器从小时开始？

Question

这是我的考试时间计数器脚本。此代码工作正常，但当 $time = 90 分钟时，我想像这样输出 1:30 剩余分钟，而不是剩余 90 分钟。此代码仅给出分钟内的输出那么有人可以帮忙吗？

<script type="text/javascript">
var timeoutHandle;
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counter = document.getElementById("timer");
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML =
            current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if( seconds > 0 ) {
            timeoutHandle=setTimeout(tick, 1000);
        } else {
            if(mins > 1){
                
                setTimeout(function () { countdown(mins - 1); }, 1000); }
        }
    }
    tick();
}
countdown('<?php echo $time; ?>');
</script>

这是我的 Blade html 文件:

    <div id="timer"></div>

Answer 1

这是一种方法。

仅当小时和分钟大于 0 时才会显示它们:

var timeoutHandle;

function secondsToTime(seconds){
  if(seconds < 60) {
    return seconds
  } else {
    if(seconds/60 < 60) {
      const mins = Math.floor(seconds/60)
      return `${mins}:${seconds-mins*60}`
    } else {
      const hours = Math.floor((seconds/60)/60)
      const mins = Math.floor(seconds/60 - hours*60)
      return `${hours}:${mins}:${seconds-mins*60-hours*60*60}`
    }
  }
}

function countdown(minutes) {
    var seconds = minutes * 60
    function tick() {
        var counter = document.getElementById("timer")
        seconds--
        
        counter.innerHTML = secondsToTime(seconds)
        
        if(seconds > 1) timeoutHandle=setTimeout(tick, 1000)
    }
    tick()
}
countdown(70)

<div id="timer"></div>