Counter from a value

Question

Counter from a value

Navigation

#1 by (1 votes)

0

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

What changes can I make to this happen? Since I could not.

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();
}

jquery date

asked by anonymous 13.04.2018 / 21:46

1 answer

datePicker with concatenated name Loop loop in programming logic algorithm

score 1 · Accepted Answer

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

I suggest that you receive input time as string formatted in minutos:segundos . Given this 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 by passing the input value to string :

aTurn.startCounting("2:35");

See this new method to run 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><divclass="atual"></div>

Personally I find the way you are implementing too complicated, and much simpler would be to store minutes and seconds separately. This way it would be easier to interpret the input value and also to display on the screen.

I also do not recommend leaving the refresh interval in 1 millisecond otherwise it weighs heavily on the client's browser unnecessarily.