Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 6
Sexo: Masculino

DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 20:00

Olá, estou usando esses botões no meu projeto,
(HTML)
<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,
(JS)
$('.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...
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17680
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 20:18

Qual é a ideia por traz desse script?
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 6
Sexo: Masculino

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 20:36

Olá, meu projeto tem uma tabela com alguns links externos e o único caminha para o usuário acessar é clicando no botão, a ideia é que o botão fique indisponível até o contador regressivo zerar(quando for clicado dispara o contador, cada par [botão e contador] tem seus respectivos tempos, 1, 5,10,60min... )
Ex, btn1 dispara c1 e só pode ser acessado novamente depois de 5min
btn2 dispara c2 e só pode ser acessado novamente depois de 10min...

indo mais a fundo, meu segundo passo vai ser procurar uma função pada a pagina que abre os links externos(para que o usuário não saina do meu site)
Ex,
<td class="btnt"><button class="btn5" onclick="dispara('c1')"><a href="pagina dos links externos.html">Clique aqui</a></button></td>

nessa página há um menu fixo no top com dois botões, "home"(volta para a pagina da tabela) e "próximo"(A PIOR PARTE, Abre o próximo link externo da tabela)

PS: podemos nós falar de uma forma mais instantânea?

Obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17680
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 21:15

A contagem regressiva para ser mantida creio que você vai precisar trabalhar com PHP. Esse script vai te dar uma ideia
http://codigosnaweb.com/forum/Re-Contag ... _31874.htm

A questão de abrir links internos acho que você pode fazer com jQuery. A função jquery load por exemplo.

Qualquer coisa me manda uma MP.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17680
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 21:29

Acho que achei uma solução mais viável para você. Já retorno.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 6
Sexo: Masculino

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 21:37

Obrigado, Aguardando...
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17680
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

29-10-2016 22:07

Montei uma base para você trabalhar nela. Você vai precisar do seguinte:

- Chamada para o jQuery
- Desse plugin http://hilios.github.io/jQuery.countdown/
- Página no formato PHP
- 2 arquivos de teste: doc1.php e doc2.php com algum conteúdo

Após isso rode o seguinte código:

<?php date_default_timezone_set('America/Sao_Paulo'); ?> <script src="jquery.js"></script> <script src="jquery.countdown.min.js"></script> <script> $(function() { // botão 1 $("#tempo1").on('click', function() { if($(this).html()=='abrir') { $("#doc1").load("doc1.php"); return false; } // após 10 segundos $(this).countdown('<?php echo date("Y/m/d"); ?> <?php echo date('H:i:s', strtotime('+10 second')); ?>', function(event) { $(this).html(event.strftime('%M:%S')); $(this).prop('disabled',true) if( $(this).html()=='00:00' ) { $(this).html('abrir'); $(this).prop('disabled',false) } }); }); // botão 1 // botão 2 $("#tempo2").on('click', function() { if($(this).html()=='abrir') { $("#doc2").load("doc2.php"); return false; } // após 20 segundos $(this).countdown('<?php echo date("Y/m/d"); ?> <?php echo date('H:i:s', strtotime('+20 second')); ?>', function(event) { $(this).html(event.strftime('%M:%S')); $(this).prop('disabled',true) if( $(this).html()=='00:00' ) { $(this).html('abrir'); $(this).prop('disabled',false) } }); }); // botão 2 }); </script> <button id="tempo1">clique aqui</button> <button id="tempo2">clique aqui</button> <div id="doc1"></div> <div id="doc2"></div>

Veja online http://codigosnaweb.com/forum/videos/co ... essiva.mp4
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado