Counter from a value

Question

Hello, I am creating a time counter, to make a music progress bar. I am using the following code. However, this counter starts counting at 00:00 as obviously, but I would like it to start counting from a value I stipulate, for example: 02:35.

What changes can I make to make that happen? Since I couldn’t.

startCounting: function(time){
    start = typeof(time) == 'undefined' ? new Date() : time;

    loop = window.setInterval('aTurn.updateCouting()', 1);
},
updateCouting: function(){
    aTurn.printTime(aTurn.diffProgress(aTurn.getTime()));
},
printTime: function(time){
    $('.atual').text(time);
},
getTime: function(){
    return(new Date() - start);
},
diffProgress: function(seconds){
    if(isNaN(seconds))
        seconds = 0;

    var diff = new Date(seconds);
    var minutes = diff.getMinutes();
    var seconds = diff.getSeconds();

    if(minutes < 10)
        minutes = '0' + minutes;
    if(seconds < 10)
        seconds = '0' + seconds;

    return minutes + ':' + seconds;
},
startProgress: function(){
    if(start){
        aTurn.unstartProgress();
    }
    else{
        aTurn.startCounting();
        return false;
    }
},
unstartProgress: function(){
    clearInterval(loop);

    start = 0;

    aTurn.fillText();
},
clearProgress: function(){
    aTurn.unstartProgress();
    $('.atual').text(aTurn.diffProgress(0));
},
fillText: function(){
    $('.atual').text();
}

Answer 1

To do what you want with the current code, you just need to change its function startCounting to interpret an input time and adjust the parameter start appropriately.

I suggest you take the time of entry as string formatted in minutos:segundos. In view of this I could rewrite it as follows:

startCounting: function(time) {
    if (typeof(time) == 'undefined'){
        start = new Date();
    }
    else if (typeof time == 'string'){ //se é uma string então tem tempo de entrada
        //partir os minutos e segundos pelos : e converter para numero
        let [minutes, seconds] = time.split(":").map(Number);      
        //andar a data para trás os milisegundos necessários para fazer como
        //se já tivesse passado o tempo de entrada
        start = new Date() - ((minutes*60 + seconds) * 1000);
    }

    loop = window.setInterval('aTurn.updateCouting()', 1);
}

And then call passing the input value as string:

aTurn.startCounting("2:35");

See this new running method integrated with the rest of your code:

aTurn = {

  startCounting: function(time) {
    if (typeof(time) == 'undefined'){
      start = new Date();
    }
    else if (typeof time == 'string'){
      let [minutes, seconds] = time.split(":").map(Number);
      
      start = new Date() - ((minutes*60 + seconds) * 1000);
    }
    
    loop = window.setInterval('aTurn.updateCouting()', 1);
  },
  updateCouting: function() {
    aTurn.printTime(aTurn.diffProgress(aTurn.getTime()));
  },
  printTime: function(time) {
    $('.atual').text(time);
  },
  getTime: function() {
    return (new Date() - start);
  },
  diffProgress: function(seconds) {
    if (isNaN(seconds))
      seconds = 0;

    var diff = new Date(seconds);
    var minutes = diff.getMinutes();
    var seconds = diff.getSeconds();

    if (minutes < 10)
      minutes = '0' + minutes;
    if (seconds < 10)
      seconds = '0' + seconds;

    return minutes + ':' + seconds;
  },
  startProgress: function() {
    if (start) {
      aTurn.unstartProgress();
    } else {
      aTurn.startCounting();
      return false;
    }
  },
  unstartProgress: function() {
    clearInterval(loop);

    start = 0;

    aTurn.fillText();
  },
  clearProgress: function() {
    aTurn.unstartProgress();
    $('.atual').text(aTurn.diffProgress(0));
  },
  fillText: function() {
    $('.atual').text();
  }
};

aTurn.startCounting("2:35");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="atual"></div>

I personally find the way in which it is implementing excessively complicated, and much simpler would be to store minutes and seconds separately. That way it would be easier to interpret the input value and also show on screen.

I also do not recommend leaving the update interval at 1 millisecond otherwise it weighs excessively on the client’s browser without need.