Javascript change countDown timer to countUp time

Question

I have this countdown timer javascript with a built in delay function. I need to change it to be a countup timer with same sort of delay function. I with I knew how to probably post a question on here as this doesn't seem to accept anything to easily. Let see if this works...

<script type="text/javascript">
  function pad(num, size) {
    var s = num+"";
    while (s.length < size) 
      s = "0" + s;
    return s;
  }

  function initCountdown(){
    setTimeout(function() {
      current_wait++;

      if(current_wait <= waits.length) {
        var countdowns = document.getElementsByClassName('countdown');
        for(var i = 0; i < countdowns.length; i++) {
          var number = parseInt(countdowns[i].innerHTML);
          number--;

          countdowns[i].innerHTML = pad(number, 2);
        }
        initCountdown();
      }
    }, waits[current_wait] * 1000);
  }

  var initial_number = 7;
  var waits          = [4, 24, 55]; //ADD HERE AS MANY SECONDS AS YOU DESIRE.
  var current_wait   = 0;

  var countdowns = document.getElementsByClassName('countdown');

  for(var i = 0; i < countdowns.length; i++){               
    countdowns[i].innerHTML = pad(initial_number, 2);
  }

  initCountdown();
</script>

What are the requirements for the countdown? Does it have to go to 0 or to a specific number? — Kevin Pastor, Feb 26 '19 at 02:11

score 0 · Accepted Answer · answered Feb 26 '19 at 02:20

If you want to change your code to count upwards, all you need to do is set the initial_number to your starting value (e.g. 1) and the code number-- to number++

A good example of a simple counting timer can be found in The simplest possible JavaScript countdown timer?

function pad(num, size) {
  var s = num + "";
  while (s.length < size) s = "0" + s;
  return s;
}

function initCountdown() {
  setTimeout(function() {
    current_wait++;

    if (current_wait <= waits.length) {
      var countdowns = document.getElementsByClassName('countdown');

      for (var i = 0; i < countdowns.length; i++) {
        var number = parseInt(countdowns[i].innerHTML);
        number++;

        countdowns[i].innerHTML = pad(number, 2);
      }

      initCountdown();
    }
  }, waits[current_wait] * 1000);
}

var initial_number = 1;
var waits = [4, 24, 55]; //ADD HERE AS MANY SECONDS AS YOU DESIRE.
var current_wait = 0;

var countdowns = document.getElementsByClassName('countdown');

for (var i = 0; i < countdowns.length; i++) {
  countdowns[i].innerHTML = pad(initial_number, 2);
}

initCountdown();

<div class='countdown'></div>

score 0 · Answer 2 · answered Feb 26 '19 at 02:24

function pad(num, size) {
  var s = num + "";
  while (s.length < size) {
    s = "0" + s;
  }

  return s;
}

function createCountdown(initialTime, finalTime) {
  var currentTime = initialTime;

  return setInterval(function() {
    var countdowns = document.getElementById("countdown");
    if (currentTime >= finalTime) {
        countdowns.innerHTML = pad(currentTime--, 2);
    }
  }, 1000);
}

var countdown = createCountdown(30, 0);

// Execute this to stop the countdown at anytime
// clearInterval(countdown);

<div id="countdown"></div>

Javascript change countDown timer to countUp time

2 Answers2