CODEWITHSUNDEEP
javascriptdatetime
user14221168
user14221168

Reputation:

How to make counter start from hour if more than 60 minutes?

This is my Script for time counter for exam.This code is working fine but when $time = 90 minutes then i want to output like this 1:30 minutes left instead of 90 minutes left.This code only give output in minutes so can anybody help ?

<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>

This is my blade html file:

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

Upvotes: 2

Views: 981

Answers (2)

raphalg
raphalg

Reputation: 468

You should consider using setInterval instead of setTimeout as you're making a counter. Your code may look like

<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>

Upvotes: 1

alotropico
alotropico

Reputation: 1994

Here is a way to do it.

This will show hours and minutes only if they are more than 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>

Upvotes: 1

Related Questions