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


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Como acionar evento na contagem regressiva em jQuery?

24-03-2016 02:39

Olá!

Gostaria de saber como exibo uma mensagem ao término do contador, ou seja, quando este é zerado. Algo como innerHTML, por exemplo.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://web.crea.acsta.net/rep_dif/Smart/Warner/BatmanVsSuperman/Arrobas-250/Contagem/dest/jquery.countdown.js"></script> <script type="text/javascript"> $(function() { var endDate = "march 24, 2016 20:00:00"; $('.countdown.simple').countdown({ date: endDate }); $('.countdown.styled').countdown({ date: endDate, render: function(data) { $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>dias</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>horas</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seg</span></div>"); } }); $('.countdown.callback').countdown({ date: +(new Date) + 10000, render: function(data) { $(this.el).text(this.leadingZeros(data.sec, 2) + " sec"); }, onEnd: function() { $(this.el).addClass('ended'); } }).on("click", function() { $(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start(); }); // End time for diff purposes var endTimeDiff = new Date().getTime() + 15000; // This is server's time var timeThere = new Date(); // This is client's time (delayed) var timeHere = new Date(timeThere.getTime() - 5434); // Get the difference between client time and server time var diff_ms = timeHere.getTime() - timeThere.getTime(); // Get the rounded difference in seconds var diff_s = diff_ms / 1000 | 0; var notice = []; notice.push('Server time: ' + timeThere.toDateString() + ' ' + timeThere.toTimeString()); notice.push('Your time: ' + timeHere.toDateString() + ' ' + timeHere.toTimeString()); notice.push('Time difference: ' + diff_s + ' seconds (' + diff_ms + ' milliseconds to be precise). Your time is a bit behind.'); $('.offset-notice').html(notice.join('<br />')); $('.offset-server .countdown').countdown({ date: endTimeDiff, offset: diff_s * 1000, onEnd: function() { $(this.el).addClass('ended'); } }); $('.offset-client .countdown').countdown({ date: endTimeDiff, onEnd: function() { $(this.el).addClass('ended'); } }); }); </script> <div class="countdown styled"></div>

Assim que chegar a 00:00:00:00, uma mensagem é exibida de maneira definitiva. Como faço? ;)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
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: Como acionar evento na contagem regressiva em jQuery?

24-03-2016 11:37

Após essa linha

$(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>dias</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>horas</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seg</span></div>");

Adiciona

if(this.leadingZeros(data.sec, 2)=="00") { return document.getElementById("retorno").innerHTML = "fim"; }

Após essa linha

<div class="countdown styled"></div>

Adiciona

<div id="retorno"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Re: Como acionar evento na contagem regressiva em jQuery?

24-03-2016 13:48

Ótima dica!

Porém, só muda o elemento "sec" (segundos), gostaria que, quando todo o contador chegasse a zero, de maneira conjunta, a mensagem fosse exibida. :)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
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: Como acionar evento na contagem regressiva em jQuery?

24-03-2016 14:32

Estava testando dentro do tempo de 1 minuto e nem me liguei nisso :lol:

Você pode testar assim

if(this.leadingZeros(data.days, 2)=="00" && this.leadingZeros(data.hours, 2)=="00" && this.leadingZeros(data.min, 2)=="00" && this.leadingZeros(data.sec, 2) == "00") {

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Re: Como acionar evento na contagem regressiva em jQuery?

24-03-2016 15:42

Sensacional! :rock:

No entanto, como faço para que todo o conteúdo fique oculto OU que a mensagem de fim apareça no lugar do contador? O mesmo chega a 00:00:00:00 e é substituído por "FIM", por exemplo.
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
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: Como acionar evento na contagem regressiva em jQuery?  #resolvido

24-03-2016 15:54

No exemplo postado você está colocando o fim dentro da div retorno.

O script do contador usa a div com a classe countdown, então é só jogar o valor dentro dessa div, dessa forma:

Troca

return document.getElementById("retorno").innerHTML = "fim";

Por

return document.getElementsByClassName("countdown")[0].innerHTML = "fim";

1
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Re: Como acionar evento na contagem regressiva em jQuery?

28-03-2016 14:44

PERFEITO! :rofl:

Mais uma vez, muito obrigado! 8)

Este código é um bom exemplo de contador para você colocar aqui no fórum para todos os usuários. ;)
1
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
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: Como acionar evento na contagem regressiva em jQuery?

28-03-2016 14:47

Boa dica.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

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