[Resolvido] Contador regressivo (COUNTDOWN)

Cícero Martins · Janeiro 1, 2011

Salve Salve tripulação do iMasters!

Mais uma vez estou aqui, e dessa vez, pelo menos para mim... ISSO É UM BIXO, NEM DE 7 E SIM DE 30 CABEÇAS...

Peço desculpas, caso o post esteja na seção errada! É que não sei como fazer, portanto, não sei qual a tecnologia usar... Se PHP ou se JAVASCRIPT.

Preciso fazer um COUNTDOWN em DIAS, HORAS, MINUTOS e SEGUNDOS, mas que não simplesmente faça o regresso e zere...

Vou tentar explicar...

Tenho um botão no site, SOMAR... Se o tempo do contador for maior que 18 segundos, ele NÃO SOMA NADA, mas se o tempo for menor que 18, ele vai subir o contador pra dezoito e voltar a regredir.

Ou seja..

- Se o tempo for maior ou igual a 18 e clicar em SOMAR, não acontece nada e continua regredindo...

- Se o tempo for MENOR que 18 (... 17, 16, 15 ...) ele retorna o contador pra 18...

A princípio, isto parece ser fácil, né?

Você cria o contador e ao clicar no botão, verifica o tempo... se for menor que 18, executa uma função e volta o contador pra 18... Se for maior, não faz nada...

A chave do negócio, eu acredito que seja aqui..

O CONTADOR funcionará igualmente pra todos usuários que estivem no site...

Por exemplo... Estão no site, EU, JOÃO e MARIA...

Se eu clicar em SOMAR e o tempo for menor que 18, o contador terá de RETORNAR pra 18 .. Mas não só pra mim e sim para.. EU, JOÃO e MARIA... Se tiver 50 usuários no site, o contador tem que retornar para TODOS. É sincronizado, o que acontecer pra um, acontece para todos.

Quando o tempo ZERAR, ele vai fazer um retorno 3x..

1º RETORNO: 15 segundos... SE NINGUÉM CLICAR, FAZ O 2 RETORNO

2º RETORNO: 10 segundos... SE NINGUÉM CLICAR, FAZ O 3 RETORNO

3º RETORNO: 5 segundos... CADASTRA NO MYSQL UM REGISTRO COM O NOME DO GANHADOR... $_SESSION["login"]["nome"].

Ou seja, estes 3 retornos SEMPRE VÃO ACONTECER, pois uma hora ou outra, o contador irá zerar, sem ninguém clicar em SOMAR.

Se acharem que estou muito folgado, querendo fazer os RETORNOS com 3 tempos diferentes, pode ser todos os 3 com 10 SEGUNDOS.

Agradeço à todos pela ajuda...

Um forte abraço e um 2011 de muita paz e saúde!

VALEU!

F3RR4M3N745 · Janeiro 1, 2011

Para fazer, você teria que colocar um iframe pequeno, e nesse iframe conteria o contador, e depois colocar para dar refresh no iframe de segundo em segundo, mais isso poderia ocasionar em queda do servidor se o fluxo fosse muito intenso, outra solução seria fazer em ajax, e dai não precisaria dar refresh na página, porém eu não sei como fazer :x

Cícero Martins · Janeiro 2, 2011

Com IFRAME e REFRESH não dá.. Por que iria ampliar muita consulta e atualização no MYSQL, pra poder sincronizar de navegador em navegador...

50 Usuários, 50 requisições, 50 refreshs...

1000 Usuários, 1000 requisições, 1000 refreshs...

Fluxo muito alto!

Mais alguém?

Abraços!

criatividade zero · Janeiro 2, 2011

js - faz a contagem de tempo

a. Se o tempo for maior ou igual a 18 e clicar em SOMAR, não acontece nada e continua regredindo...

b. Se o tempo for MENOR que 18 (... 17, 16, 15 ...) ele retorna o contador pra 18...

...ele retorna o contador pra 18 - o meu contador, o do JOÃO e o contador da MARIA, serão zerador

caso a. nada é consultado

caso b. foi solicitada a atualização do contador pelo clique dado pelo JOÃO, que irá atualizar todos os contadores de quem estiver no site

então, sempre que um clique entrar no caso b, será feita uma consulta - para zerar e para informar que foi zerado por alguem

ex:

João clicou - o sistema zera o contador do João e marca um flag para o quando o contador dos outros entrar no caso b

seria basicamente um XML simples que você marca que ha atualização e se quiser, grava quem zerou

em ação:

aos 15 segundos Criatividade Zero zerou o contador, quando o contador do Cícero chegar aos 18, será feita uma consulta ao XML - no caso, ha marcação do contador zerado, então zera o contador do Cícero

aos 18 o contador do Cícero fez a consulta no XML, mas não havia marcação, então nada acontece

tentei dar uma explicação mais detalhada possivel, espero que tenha dado pra entender

as consultas nao precisam ser ao banco de dados, podem ser - e recomendo - o uso do XML para esse caso

[]s

Leox · Janeiro 2, 2011

js - faz a contagem de tempo

a. Se o tempo for maior ou igual a 18 e clicar em SOMAR, não acontece nada e continua regredindo...

b. Se o tempo for MENOR que 18 (... 17, 16, 15 ...) ele retorna o contador pra 18...

...ele retorna o contador pra 18 - o meu contador, o do JOÃO e o contador da MARIA, serão zerador

caso a. nada é consultado

caso b. foi solicitada a atualização do contador pelo clique dado pelo JOÃO, que irá atualizar todos os contadores de quem estiver no site

então, sempre que um clique entrar no caso b, será feita uma consulta - para zerar e para informar que foi zerado por alguem

ex:

João clicou - o sistema zera o contador do João e marca um flag para o quando o contador dos outros entrar no caso b

seria basicamente um XML simples que você marca que ha atualização e se quiser, grava quem zerou

em ação:

aos 15 segundos Criatividade Zero zerou o contador, quando o contador do Cícero chegar aos 18, será feita uma consulta ao XML - no caso, ha marcação do contador zerado, então zera o contador do Cícero

aos 18 o contador do Cícero fez a consulta no XML, mas não havia marcação, então nada acontece

tentei dar uma explicação mais detalhada possivel, espero que tenha dado pra entender

as consultas nao precisam ser ao banco de dados, podem ser - e recomendo - o uso do XML para esse caso

[]s

Fala pessoal...

Também não sou Expert em PHP, mas de acordo com a explicação do "criatividade zero", isso está "cheirando" um pouco a Javascript/Ajax com XML.

Achei alguma coisa na internet: http://bermonruf.wordpress.com/2006/12/11/funcao-de-cronometro-contagem-regressiva/, mas não sei se vai ajudar muito.

Saudações aos senhores... e Feliz 2011 a todos.

criatividade zero · Janeiro 2, 2011

de acordo com a explicação do "criatividade zero", isso está "cheirando" um pouco a Javascript/Ajax com XML.

mas foi exatamente o que eu falei :huh:

js+xml

nao ha necessidade de se ter uma tbl temporaria no banco de dados apenas pra dar um flag para o cronometro, entao o XML serve para o caso sem o menor problema

como ele citou

1000 Usuários, 1000 requisições, 1000 refreshs...

fazer 1000 consultas apenas para saber se o cronometro vai zerar é desperdicio

o MYSQL suporta muito alem disso - obvio - mas precisamos levar em conta uma serie de outros fatores

Leox · Janeiro 2, 2011

js+xml

Desculpe, é que não vi

js - faz a contagem de tempo

no início da resposta... pois quando cheguei no meio da explicação já estava desnorteado... :huh:

Então é isso... JS + XML na certa... ^_^

criatividade zero · Janeiro 2, 2011

...quando cheguei no meio da explicação já estava desnorteado... :huh:

hehehehe

tb achei que fui longo na explicação, mas é que tentei deixar claro todo o processo, cada etapa... passo a passo

mas espero que o final tenha ficado mais claro

Leox · Janeiro 2, 2011

...quando cheguei no meio da explicação já estava desnorteado... :huh:

hehehehe

tb achei que fui longo na explicação, mas é que tentei deixar claro todo o processo, cada etapa... passo a passo

mas espero que o final tenha ficado mais claro

Sem problemas... deu pra entender... ^_^

Cícero Martins · Janeiro 2, 2011

Poderia me dar uma luz de como iniciar isso? Fiquei com uma série de dúvidas.

- Vou ter que atualizar o XML de segundo em segundo pra saber o tempo real?

- Como vou fazer esse XML?

Eu não entendi nada! risos!

Abraços!

criatividade zero · Janeiro 3, 2011

a base é você marcar a ação e trabalhar com o horario em que houve a ação

o XML so atualiza se houver ação, caso contrario nada acontece nele

imagine o XML como um DB normal, onde você insere a ação de clique e grava o horario, depois basta consultar com base nesse horario para saber se esta disponivel

aos 15 segundos Criatividade Zero zerou o contador

adiciona uma flag no XML informado que o contador foi zerado

todo contador de quem estiver conectado, quando chegar em 18 segundos, fará uma consulta nesse NODE do XML para ver o tipo de flag - se a marcação for positiva, o contador zera, senão continua rodando

então, se eu clicar em zerar, o contador do Cícero e do Leox aos 18 segundos, farão uma consulta ao XML onde terá uma flag informando que deve zerar o contador

agora é a parte mais chata

você deve fazer uma atualização para quando todos os contadores zerarem, a flag seja apagada, caso contario sempre haverá marcação para zerar mesmo que não tenha tido mais clique

1. se eu clicar em zerar, o contador do Cícero e do Leox aos 18 segundos, vão zerar

2. apos todos zerarem a flag apaga para poder retornar a contagem e liberar outros cliques

esse detalhe não me foquei ainda, mas suponhamos de novo nos 3 conectdos

se eu clicar as 02:31:10, o contador vai zerar e so será permitida a ação novamente as 02:31:28 - devido ao limite de 18 segundos

então quando alguem zerar, você poderia fazer um NODE para o status da flag, um para o horario que houve a atualização e outro para o proximo horario

<node_flag>true</node_flag>

<action_time>02:31:10</action_time>

<next_time>02:31:28</next_time>

nao precisa ser fixo nesse NODE 'next_time', mas tenha uma verificação de horario para poder apagar o status da flag

nao sei se ficou claro a parte 'teorica', mas tentei ser o mais especifico

se nao souber como aplicar o JS ou trabalhar com o XML, diga qual a duvida

Cícero Martins · Janeiro 3, 2011

Isso me parece complicado.. E se simplificassemos...

Contador normal..

Se o tempo for maior ou igual a 30 segundos não executa nenhuma ação..

Se o tempo for MENOR que 30 segundos, retorna para 30 segundos.

O mais complicado acho, seria atualizar pra todo mundo...

Agora acho que deu uma simplificada né?

Alguém pra dar alguma luz?

criatividade zero · Janeiro 3, 2011

Se o tempo for maior ou igual a 30 segundos não executa nenhuma ação..

Se o tempo for MENOR que 30 segundos, retorna para 30 segundos.

realmente, um contador comum e individual não é nada d+

o caso que você queria era mais complicado pq você iria executar uma ação para N usuarios, então ha verificações indispensaveis

1º passo é decidir o que você vai querer, ou um contador simples individual ou um 'comunitario'

o Leox postou um link de contador, ja deu uma olhada?

Cícero Martins · Janeiro 3, 2011

Sim, dei uma olhada..

Um contador individual, sei desenvolver...

Agora pergunto..

Como faço pra sincronizar este contador com todos os usuários que estiverem no site.. E pra caso tenha alteração (por exemplo... recontagem de tempo), atualize pra todo mundo?

Abraços!

William Bruno · Janeiro 3, 2011

se você fizer um ajax simples, com setInterval() ou setTimeout(), para buscar a informação do servidor, para cada usuario, a cada x segundos, você irá sobrecarregar o sistema.

pesquise sobre ajax reverso/comet/server push

criatividade zero · Janeiro 3, 2011

da forma que citei acima

essa é aparte mais complicada pq vai precisar de verificações que rodem para quem estiver 'compartilhando' o mesmo cronometro

como se fosse em bloco

1º bloco de processo as 13:22:10

verifica a flag para zerar -> zera ou continua

2º bloco de processo as 13:22:28

verifica a flag para zerar -> zera ou continua

Cícero Martins · Janeiro 4, 2011

Agradeço.

Apesar de não resolvido, tentarei ver o que consigo.

Um abraço!

criatividade zero · Janeiro 4, 2011

se você fizer um ajax simples, com setInterval() ou setTimeout(), para buscar a informação do servidor, para cada usuario, a cada x segundos, você irá sobrecarregar o sistema.

pesquise sobre ajax reverso/comet/server push

não com XML

William Bruno · Janeiro 4, 2011

não com XML

?

uma coisa é uma coisa, outra coisa é outra coisa.

XML, MySQL... é a forma de guardar os dados.

O que eu disse, independe disso. É completamente diferente, não importa se você vai usar XML, SQL, TXT, ou qq outra coisa, vai precisar ver sobre o que postei.

Cícero Martins · Janeiro 4, 2011

Alô tripulação...

Vamos lá... Eu já consegui fazer a SOMA funcionar pra uma pessoa só.. Agora só preciso fazer com que isso entre em sincronia pra todo mundo que estiver na página...

Segue o código que fiz...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTE</title>
<script language="javascript">
var YY = 2011;
var MM = 01;
var DD = 4;
var HH = 17;
var MI = 18;
var SS = 00;

function somaContador() {
	SS += 10;
	atualizaContador();
}

function atualizaContador() {  
	var hoje = new Date();  
	var futuro = new Date(YY,MM-1,DD,HH,MI,SS);   
	var ss = parseInt((futuro - hoje) / 1000);  
	var mm = parseInt(ss / 60);  
	var hh = parseInt(mm / 60);  
	var dd = parseInt(hh / 24);   
	ss = ss - (mm * 60);  
	mm = mm - (hh * 60);  
	hh = hh - (dd * 24);   
	var faltam = '';  
	faltam += (dd && dd > 1) ? dd+' DIAS + ' : (dd==1 ? '1 DIA + ' : '');
	faltam += (hh && hh >= 10) ? hh+':' : ((hh<10 && hh>0) ? '0'+hh+':' : '');
	faltam += (mm && mm >= 10) ? mm+':' : ((mm<10 && mm>0) ? '0'+mm+':' : '');
	// faltam += (toString(mm).length) ? mm+':' : '';   
	faltam += (ss && ss >= 10) ? ss : (ss<10 ? '0'+ss : ':00');

	if (dd+hh+mm+ss > 0) {
		document.getElementById('contador').innerHTML = faltam;       
		setTimeout(atualizaContador,1000);  
	} else {
		document.getElementById('contador').innerHTML = 'VENDIDO'; 
		setTimeout(atualizaContador,1000);  
	}
}
</script>
</head>
<body onload="atualizaContador()">
<div id="apDiv1">
 <div align="center"><a onclick="javascript:somaContador();">SOMAR</a><br />
 <br /><span id="contador"> </span></div>
</div>
</body>
</html>

Pensei em fazer pra registrar no banco de dados a cada clique no "SOMAR"

Mas para que atualize pra todo mundo, eu teria que fazer uma consulta no banco de dados a cada SEGUNDO.. O que iria aumentar muito o fluxo.

Imagine MIL pessoas no site, seriam, MIL consultas ao banco de dados POR SEGUNDO.

Abraço!

Tópico resolvido!

Arquivado

[Resolvido] Contador regressivo (COUNTDOWN)

Recommended Posts

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

F3RR4M3N745 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

criatividade zero 17

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cícero Martins 0