Countdown timer with hundredths?

Question

I'm trying to create a countdown timer in the format of 00:00:00 (minutes, seconds, and hundredths). Right the now the way I set up my countdown timer, is to make sure the user inputs in the format of 00:00:00 (which has to be). From there the countdown time should commence when they click the start button. I see that it does somewhat of a countdown, but I'm not sure what could be the problem with my implementation. The hundredths is not decrementing correctly for some reason. It should start of as 10:00:00 (10 mins) and go to 09:59:99.. 09:59:98, etc.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Countdown Timer</title>
   <script type="text/javascript">
      var running = 0;
      var hundreds = 0;

      function validTime() {
      var setTime = document.getElementById("timeEntered").value; 
      var regex = /^\d{2}:\d{2}:\d{2}$/;
      if (regex.test(setTime)) {
            document.getElementById("timeAlert").innerHTML = "<span class='valid'>Valid</span>";
            return (true);
            } else {
            document.getElementById("timeAlert").innerHTML = "<span class='error'>Invalid time entered. Please make sure it's in the format 00:00:00</span>";
            return (false);
            }
      }

      function correctTime(){
         if (validTime()){
            countdownTimer();
            return true;
         }else{
            alert("Please correct your inputted time.");
            return false;
         }
      }

      function countdownTimer() {
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(parseInt(timeToSeconds) <= 600 ) {
            startPause();
         }else{
            document.getElementById("output").innerHTML = "Sorry. Time range cannot exceed 10 mins.";
         }
      }

      function startPause(){
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(running == 0){
            running = 1;
            decrement();
            document.getElementById("startPause").innerHTML = "Start/Stop";
         }else{
            running = 0;
            document.getElementById("startPause").innerHTML = "Resume";
         }
      }

      var hundreds = 0;
      function decrement(){
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(running == 1){        
               var mins = Math.round((timeToSeconds - 30)/60);
               var secs = timeToSeconds % 60;
               //var hundredths = timeToSeconds % 100;
               if(mins < 10) {
                  mins = "0" + mins;
               }

               if(secs < 10) {
                  secs = "0" + secs;
               }

               document.getElementById("output").innerHTML = mins + ":" + secs + ":" + hundreds;
               if (hundreds === 0){
                  if(timeToSeconds ===0){
                     clearInterval(countdownTimer);
                     document.getElementById("output").innerHTML = "Time's Up.";
                  }else{
                     timeToSeconds--;
                     hundreds = 100;
                  }
                  }else{
                     hundreds--;
                  }
                  var countdownTimer = setInterval('decrement()', 10)
          }
      }

</script>
</head>
<body>
   <h1>Countdown Timer</h1>
   <div id="mainCont">
      <p>Please enter the desired time:
        <input type="text" id="timeEntered" onblur="validTime();">&nbsp;&nbsp;<span id="timeAlert"></span>
      </p>
      <p>
        <button id="startPause" onclick="correctTime()">Start/Stop</button>
      </p>
      <div id="output">00:00:00</div>
  </div>
</body>
</html>

Possible duplicate of [The simplest possible JavaScript countdown timer?](http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer) — gabbar0x, Dec 11 '15 at 05:42
This is a countdown timer with minutes seconds hundredths. Not hours. — user1776479, Dec 11 '15 at 05:46
You've got a nasty, nasty bug in the ms parts. It freezes up the browser window as well — gabbar0x, Dec 11 '15 at 07:27
I have some working code that gets you 1/100 of a second. Is that cool? Natually, with a 00:00:00 format, you can only have 100th of a second because you ahve only 2 digits to display — gabbar0x, Dec 11 '15 at 07:55
I;m not much experienced in JS. However, i can only read some code so that i how i designed it. Give me 5 minutes I will post it properly in the SO snippet format — gabbar0x, Dec 11 '15 at 07:59

score 1 · Answer 1 · answered Apr 17 '17 at 14:52

I think @bholagabbar's code needs rewriting into hundreths of a second rather than in seconds.

function startTimer(duration, display) {
    var timer = duration, minutes, seconds, dispms;
    setInterval(function () {
        dispms=parseInt(timer % 100,10);
        seconds = parseInt(timer / 100, 10);
        minutes = parseInt(seconds / 60, 10);
        seconds = parseInt(seconds % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        dispms = dispms < 10 ? "0" + dispms : dispms;
        display.textContent = minutes + ":" + seconds+":"+dispms;

        if (--timer < 0) {
            timer = duration;
        }
    }, 10);  //hundreths of a second - 1000 would be 1 second
}

window.onload = function () {
    var fiveMinutes = 60 * 5 * 100, //hundreths of second
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

score 0 · Answer 2 · answered Dec 11 '15 at 08:07

I'm not sure if this is what you wanted but I have some working code for a timer that counts up to the given input (in seconds) which includes the 1/100th of a second. If you want to include ms as you mentioned, you will need 3 0's or ':000' for the display int the end. Here is the code. How will of course, have to mod it for your scenario but the timer is implemented perfe

function startTimer(duration, display) {
    var timer = duration, minutes, seconds, dispms;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        dispms=parseInt((timer)%100,10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        dispms = dispms < 10 ? "0" + dispms : dispms;
        display.textContent = minutes + ":" + seconds+":"+dispms;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>

I think you will have to make changes only in the HTML part. Rest of the logic in my code is fine for a general timer. You will have to pass in the seconds as an argument, that is all

hmmm not quite. The user has to be able to enter in the time format 10:00:00. (10 mins). Once that happens it should decrement to 09:59:99... 09:59:98... etc. Basically seconds change until the hundredths reach 00. Also I'm trying to refrain from using query since I'm not too familiar with it. — user1776479, Dec 11 '15 at 08:20

Countdown timer with hundredths?

2 Answers2