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


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Script de contagem regressiva, dias, horas, minutos e segundos

28-03-2016 14:51

Nesse post vou mostrar um script jQuery de contagem regressiva, onde é mostrado quantos dias, horas, minutos e segundos faltam para determinada data.

<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 28, 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>"); 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") { alert("fim da contagem"); } } }); $('.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>


Baseado no seguinte post do usuário Vinicius Muniz Re-Como-acionar-evento-na-contagem-regr ... _9758.html
1
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
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: Script de contagem regressiva, dias, horas, minutos e segundos

02-07-2017 14:41

Segue a dica para quem deseja deixar o texto na horizontal.

Troque essa linha

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

Por essa

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

0
A melhor hospedagem para o seu site HostGator!

Quem está online

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