Ir ao conteúdo
  • Cadastre-se
Ronaldo de Lima

Difícil: botão, contador regressivo, javascript, onclick

Recommended Posts

Olá, estou usando esses botões no meu projeto,

 <button class="btn1" onclick="dispara('c1')">Clique aqui</button>
<span id="c1" inicial="1"></span>
 <button class="btn2" onclick="dispara('c2')">Clique aqui</button>
<span id="c2" inicial="2"></span>
 <button class="btn3" onclick="dispara('c3')">Clique aqui</button>
<span id="c3" inicial="3"></span>
 <button class="btn4" onclick="dispara('c4')">Clique aqui</button>
<span id="c4" inicial="3600"></span>

Cada um deles com um tempo diferente,

$('.btn1').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1min. */
  }, 60000);
});
$('.btn2').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 2min. */
  }, 120000);
});
$('.btn3').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 3min. */
  }, 180000);
});
$('.btn4').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1h. */
  }, 3600000);
}); 

Visualizar botões aqui: https://jsfiddle.net/4h3pnL26/10/

 

Minhas Questões são as seguintes,

1 - quando eu atualizo a pagina os botões voltam a ficar habilitados, que alterações devo fazer pra arrumar?

2 - como fazer cada botão iniciar um contador regressivo de acordo com seus respectivos tempos? (c1, c2, c3 e c4)

3 - como seria o código desse contador regressivo?

 

Desde já eu agradeço...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eae, beleza?

 

Cara, primeira coisa que eu faria é reduzir seu código (não vai alterar a funcionalidade, ele só ficará menor e mais fácil de trabalhar):

 

<button id="btn1" class="btnDispara" onclick="dispara('c1')" data-tempo="60000">Clique aqui</button>
<span id="c1" inicial="1"></span>
<button id="btn2" class="btnDispara" onclick="dispara('c2')" data-tempo="120000">Clique aqui</button>
<span id="c2" inicial="2"></span>
<button id="btn3" class="btnDispara" onclick="dispara('c3')" data-tempo="180000">Clique aqui</button>
<span id="c3" inicial="3"></span>
<button id="btn4" class="btnDispara" onclick="dispara('c4')" data-tempo="3600000">Clique aqui</button>
<span id="c4" inicial="3600"></span>

<script>
  $('.btnDispara').click(function() {

    var button = $(this);

    button.addClass('disabled').text('Aguarde...');

    setTimeout(function() {
      button.removeClass('disabled').text('Clique aqui');

    }, btn.attr("data-tempo"));
  });
</script>

 

Em 29/10/2016 às 19:57, Ronaldo de Lima disse:

1 - quando eu atualizo a pagina os botões voltam a ficar habilitados, que alterações devo fazer pra arrumar?

 

Pra essa pergunta, eu faria da seguinte maneira: salvaria o momento do clique num banco de dados ou (caso você não tenha acesso) no Local/Web Storage do navegador e então compararia com a hora atual. Por exemplo se no momento do clique até a hora atual se passaram 60 segundos, libera o primeiro botão e assim sucessivamente com os outros...

 

Em 29/10/2016 às 19:57, Ronaldo de Lima disse:

2 - como fazer cada botão iniciar um contador regressivo de acordo com seus respectivos tempos? (c1, c2, c3 e c4)

3 - como seria o código desse contador regressivo?

 

Cara, essa pergunta vai depender de como você vai resolver a anterior. Mas para todos os efeitos você vai fazer um setTimout que vai ficar rodando todo segundo e validando quais botões foram clicados e quantos segundos faltam para eles serem liberados. Ficaria mais ou menos assim:

var tempo1 = 0;
var tempo2 = 0;
var tempo3 = 0;
var tempo4 = 0;

setTimeout(validaTempo, 1000);

function validaTempo(){
  if(tempo1 > 0){
  	tempo1--;
  }else{
  	$("#btn1").removeClass('disabled').text('Clique aqui');
  }
  
  if(tempo2 > 0){
  	tempo2--;
  }else{
  	$("#btn2").removeClass('disabled').text('Clique aqui');
  }
  
  if(tempo3 > 0){
  	tempo3--;
  }else{
  	$("#btn3").removeClass('disabled').text('Clique aqui');
  }
  
  if(tempo4 > 0){
  	tempo4--;
  }else{
  	$("#btn4").removeClass('disabled').text('Clique aqui');
  }
}

As variáveis tempo1, tempo2, tempo3 e tempo4 poderiam ser incrementadas com os seus respectivos valores, quando fossem clicadas nos seus respectivos botões.

 

Se caso você utilizar a solução que eu dei pro contador, você precisará fazer uma função para quando a página for carregada, ela realizar a conta e atribuir os valores as variáveis de tempo antes de realizar esta função do contador.

 

Espero ter ajudado, qualquer coisa só chamar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×