Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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.

Editado por JonathanMMachado

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






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

×