如果超過 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>

這是我的刀片 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>

Answer 2

在制作計數器時，您應該考慮使用setInterval而不是setTimeout 。 您的代碼可能看起來像

<script type="text/javascript">
    var timeoutHandle;
    function countdown(minutes) {
        var mins = minutes;
        var seconds = mins * 60;
        function tick() {
            var counter = document.getElementById("timer");
            seconds--; 
            var hours = Math.floor(seconds / 3600);
            var tmp = seconds % 3600;
            var m = Math.floor(tmp / 60);
            var s = tmp % 60;

            var format = hours > 0 ? (hours + ":") : "";
            format += (m > 0 ? (m + ":") : "00:") + s.toString();
            counter.innerHTML = format;
        }
    
        var interval = setInterval(tick, 1000);
        if (seconds <= 0) clearInterval(interval);
    }

    countdown('<?php echo $time; ?>');
</script>