2

Como fazer um contador em JavaScript/jQuery onde ele seja nesse formato 00:00 e que ele pare e execute uma ação for parado, mas o seu limite é de 10 minutos, só pode ficar de 0s até 10 minutos, quando chegar nos 10 minutos ele automaticamente para e executa ação mesmo nao tendo sido parado manualmente...

2 Respostas 2

4

Pus-me a brincar com a ideia e cheguei a um cronometro assim:

var Cronometro = function (opcoes) {
    this.opcoes = opcoes || {};
    this.contador = null;
    this.tempo = 0;
    this.configurar = function () {
        this.mostrador = this.opcoes.mostrador || document.querySelector('.mostrador');
        this.iniciar = this.opcoes.iniciar || document.querySelector('.iniciar');
        this.pausar = this.opcoes.pausar || document.querySelector('.pausar');
        this.iniciar.addEventListener('click', this.contar.bind(this));
        this.pausar.addEventListener('click', this.parar.bind(this));
        this.accao = this.opcoes.callback || function () {
            alert('chegou aos dez minutos!');

        }
    }

    this.contar = function () {
        var self = this;
        this.contador = setInterval(function () {
            self.mostrar.call(self, self.tempo++);
        }, 1000);
    }
    this.parar = function () {
        clearInterval(this.contador);
        this.contador = null;
    }
    this.formatarNumeros = function (nr) {
        var str = nr + '';
        return str.length < 2 ? '0' + str : str;
    }
    this.mostrar = function (tempo) {
        var minutos = Math.floor(tempo / 60);
        var segundos = tempo % 60;
        this.mostrador.innerHTML = [minutos, segundos].map(this.formatarNumeros).join(':');
        if (tempo == 36000) {
            this.parar();
            this.tempo = 0;
            this.accao();
            this.contar();
        }
    }

    this.configurar();
    this.contar();
}

jsFiddle: http://jsfiddle.net/1f32wtsm/

É um objeto reciclável que tem alguns métodos para as funcionalidades que ele precisa. Escreví em PT por isso acho que a maior parte se auto-explica.

Podes passar elementos para as funcionalidades de mostrar/parar/começar, se não ele tem valores default que vai procurar por classes.

A parte que pode precisar de explicação é:

this.contar = function () {
    var self = this;
    this.contador = setInterval(function () {
        self.mostrar.call(self, self.tempo++);
    }, 1000);
}

O setInterval vai correr no escopo global. Isso quer dizer que se usar this dentro dessa função ele vai apontar para o window. Então usei var self = this; para guardar a referência do meu objeto e uso self.mostrar.call(self para chamar this.mostrar() com o this certo.

Fazendo assim, reciclável, posso ter vários contadores ao mesmo tempo.

2
  • 2
    Ora, você gosta de brincar com o que projeta, também sou assim!, Funcionou em perfeita harmonia, gostei muito pois a forma com que voce montou a função fez com que ela ficasse maleável e fácil de manipular, ficou ótimo, fiz adaptações ótimas, Muito obrigada por acrescentar meu conhecimento e me ajudar =D
    – Elaine
    Commented 14/07/2015 às 16:15
  • @Elaine Fico contente de ter sido útil!
    – Sergio
    Commented 14/07/2015 às 16:56
2

Fiz uma pequena função que você pode controlar o tempo. (O JQuery não é necessário para o funcionamento do script, só usei para manipular o textbox e os buttons).

var Clock = {
  minutosStop: 10, //pode "setar"o tempo usando "Clock.minutosStop = 5" para 5 min
  totalSegundos: 0,
  start: function() {
    var self = this;
    this.interval = setInterval(function() {
      self.totalSegundos += 1;
      self.min = Math.floor(self.totalSegundos / 60 % 60);
      self.seg = parseInt(self.totalSegundos % 60);
      if (typeof self.onChange === 'function')
        self.onChange();
      if (self.min == self.minutosStop)
        self.fire();
    }, 1000, self);
    return this;
  },
  toString : function() {
    return String("00" + this.min).slice(-2) + ":" + String("00" + this.seg).slice(-2);
  },
  onChange: null,
  funcaoFire: null,
  pause: function() {
    clearInterval(this.interval);
    delete this.interval;
    return this;
  },
  resume: function() {
    if (!this.interval) this.start();
    return this;
  },
  fire: function() {
    if (typeof this.funcaoFire === 'function')
      this.funcaoFire();
    this.pause();
    this.totalSegundos = 0;
    return this;
  }
};

Clock.start();
Clock.funcaoFire = function() {
  alert(Clock.toString());
}
Clock.onChange = function() {
  $("#contador").val(Clock.toString());
}

$('#pauseButton').click(function() {
  Clock.pause();
});
$('#resumeButton').click(function() {
  Clock.resume();
});
$('#fireButton').click(function() {
  Clock.fire();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="contador" value="00:00" />
</div>
<div>
  <input id="pauseButton" type="button" value="Pause">
  <input id="resumeButton" type="button" value="Resume">
  <input id="fireButton" type="button" value="Fire">
</div>

1
  • 1
    Ótimo código! Muito boa a forma que voce aplica os métodos de execução, super formidável, obrigada!
    – Elaine
    Commented 14/07/2015 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .