Search code examples
javascripttimercountdown

Timer wont stop at 00:00


My countdown timer wont stop 00:00 it just keeps going until it reaches " -01:59 " then " -02:59 " and so on , I changed some of the code here and there but it still keeps going and going

<html>

<head>
    <title>Countdown</title>
    <script type="text/javascript">
    // set minutes
    var mins = 1;

    // calculate the seconds (don't change this! unless time progresses at a      different speed for you...)
    var secs = mins * 60;

    function countdown() {
        setTimeout('Decrement()', 1000);
    }

    function Decrement() {
        if (document.getElementById) {
            minutes = document.getElementById("minutes");
            seconds = document.getElementById("seconds");
            // if less than a minute remaining
            if (seconds < 59) {
                seconds.value = secs;
            } else {
                minutes.value = getminutes();
                seconds.value = getseconds();
            }
            secs--;
            setTimeout('Decrement()', 1000);
        }
    }

    function getminutes() {
        // minutes is seconds divided by 60, rounded down
        mins = Math.floor(secs / 60);
        return ("0" + mins).substr(-2);
    }

    function getseconds() {
        // take mins remaining (as seconds) away from total seconds remaining
        return ("0" + (secs - Math.round(mins * 60))).substr(-2);
    }
    </script>
</head>

<body>
    <div id="timer">
        This is only valid for the next
        <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
        <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
    </div>
    <script>
    countdown();
    </script>

Solution

  • Here you are: should assign setTimeout to a variable, when secs is 0, clear the time out.

         // set minutes
        var mins = 1;
    
         // calculate the seconds (don't change this! unless time progresses at a      different speed for you...)
        var secs = mins * 10;
        var timeout;
    
        function countdown() {
          timeout = setTimeout('Decrement()', 1000);
        }
    
        function Decrement() {
          if (document.getElementById) {
            minutes = document.getElementById("minutes");
            seconds = document.getElementById("seconds");
            // if less than a minute remaining
            if (seconds < 59) {
              seconds.value = secs;
            } else {
              minutes.value = getminutes();
              seconds.value = getseconds();
            }
            secs--;
            if (secs < 0) {
              clearTimeout(timeout);
              return;
            }
            countdown();
          }
        }
    
        function getminutes() {
          // minutes is seconds divided by 60, rounded down
          mins = Math.floor(secs / 60);
          return ("0" + mins).substr(-2);
        }
    
        function getseconds() {
          // take mins remaining (as seconds) away from total seconds remaining
          return ("0" + (secs - Math.round(mins * 60))).substr(-2);
        }
        countdown();
    <div id="timer">This is only valid for the next
      <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">:
      <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
    </div>

    Hope this helps.