GUJS - Grupo de Usuários Javascript » Downloads e Exemplos

Contagem regressiva

Matheus Zeuch — Thu, 19 Apr 2007 00:02:43 +0000

Hoje vamos aprender a fazer um contador regressivo simples para uma data e hora futura. Nosso contador deve mostrar o resultado em um formato texto, numa tag span, para que seu estilo possa ser configurado. O resultado é interessante.

O código abaixo é a parte principal do nosso contador. Observe que utilizei variáveis para setar qual a data e hora futura. A vantagem disso é que essas variáveis podem ser atualizadas por uma outra função javascript, fazendo com que o nosso contador possa ser atualizado em tempo real (veremos isso em funcionamento no exemplo prático).

var YY = 2007;
var MM = 12;
var DD = 31;
var HH = 23;
var MI = 59;
var SS = 59; 

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 += (toString(hh).length) ? hh+' hr, ' : '';
  faltam += (toString(mm).length) ? mm+' min e ' : '';
  faltam += ss+' seg'; 

  if (dd+hh+mm+ss > 0) {
    document.getElementById('contador').innerHTML = faltam;
    setTimeout(atualizaContador,1000);
  } else {
    document.getElementById('contador').innerHTML = 'CHEGOU!!!!';
    setTimeout(atualizaContador,1000);
  }
}

A função atualizaContador() foi escrita de maneira que possa ser alterada facilmente. Você pode, por exemplo, alterar o código para que retorne o contador em vez de exibí-lo.

Abaixo está o código html que utilizei para demonstrar o funcionamento. Fiz com que o evento onchange dos campos atualizem as variáveis da data futura.


 /
 /
 às
 :
 :



Faltam

Você pode ver um exemplo em funcionamento deste código aqui. Ou se preferir, pode baixar o código para estudar melhor.

Exemplo | Download

Até a próxima!

Barra de rolagem dinâmica com Ajax

Matheus Zeuch — Thu, 12 Apr 2007 00:00:21 +0000

Um recurso muito interessante do Google Reader é a área onde são listados os posts dos feeds que você assina. Quando os posts são carregados, apenas alguns aparecem na tela, e conforme você vai rolando aquela página para baixo, os demais posts vão aparecendo pouco a pouco. Isso é uma forma de navegação pouco utilizada na web, mas muito útil em alguns casos.

Além da vantagem de não precisar carregar mais itens que o necessário, o usuário também não perde de vista os posts que já estavam carregados quando os novos são exibidos. Este é um problema que acontece naquele conhecido modelo de paginação com os links das páginas e os de próxima página e página anterior.

O objetivo é carregar somente o número de mensagens que preencha o espaço na tela do usuário e, caso o usuário baixe até o final a barra de rolagem, o sistema carregue novas mensagens, mantendo na tela as anteriores.

No exemplo deste artigo, você pode ver na prática como funciona este modelo de paginação. Se preferir, baixe os códigos fontes para fazer seus estudos e alterações.

Como funciona?

Não vou me aprofundar explicando a utilização da classe Ajax utilizada no projeto, deixo isso para um futuro post. No momento, veremos as funções essenciais do exemplo, e a primeira delas é a função addLine(), que insere (via DOM) uma nova linha no div dos itens.

A função recebe como parâmetro um objeto contendo os atributos id e text e monta a linha que será inserida logo em seguida. Note que a função também controla a variável global id que será passada como parâmetro em todas as requisições dos notos itens. No nosso caso, apenas para que cada mensagem tenha um número maior que a anterior.

As funções paginationComplete() e pagination() são as responsáveis por fazer as requisições das próximas mensagens.

A função onScroll() verifica se a barra de rolagem está no rodapé da página. Se estiver, executa a função pagination(), que como vimos, fará a requisição das novas mensagens.

A função init() é quem chama pela primeira vez a função pagination(). Ela também atribui aos eventos window.onscroll e window.onresize, para que no sistema faça requisições sempre que ainda tiver espaço para novas mensagens.

Onde utilizar o método?

Utilizei este método (e estes mesmos códigos) em um sistema de monitoramento de mensagens, onde o usuário abria a tela de via as últimas mensagens, e conforme ia baixando a tela as mensagens antigas eram carregadas (até que não houvessem mais mensagens antigas no banco). Outro sistema de refresh fazia as requisições das novas mensagens, que eram exibidas no topo. Com isso consegui um bom sistema de monitoramento em tempo real de mensagens, e que ao mesmo tempo era prático para visualizar mensagens antigas.

Você pode usar sua imaginação para utilizar estes códigos em seus projetos. Acho que é um bom exemplo de se usar em sistemas de mensagens, leitor de e-mails, agregador de feeds rss, e em qualquer lugar onde o método convencional de paginação não é a melhor opção.

Considerações finais

Testei o exemplo no Firefox e no IE 7, portanto, se você encontrar algum erro por favor me avise que eu corrijo.

Se tiver dúvidas ou quiser fazer algum comentário sobre o artigo e o exemplo, sinta-se à vontade para utilizar o formulário de comentários abaixo ou então acompanhar a discussão no fórum.

Divirta-se!

Exemplo | Download

Ordenando listas com Javascript

Matheus Zeuch — Mon, 26 Mar 2007 18:26:01 +0000

A classe SortableList é um pequeno exemplo de utilização de métodos DOM sendo utilizados para facilitar a ordenação de itens de uma lista.

Para utilizar a classe, basta importar o arquivo js e instanciar um objeto que estará associado à sua lista. Feito isso você pode criar seus próprios links para manipular os eventos de ordenação da lista (mover para cima ou para baixo). Veja o exemplo abaixo:

var bozo;

function init() { bozo = new SortableList($('list')); } //

window.onload = init;

Ao instanciar o SortableList você também pode definir duas opções interessantes:

A primeira é o “rotate”, que define se os itens vão girar ou não (true ou false), ou seja, se o primeiro da lista vai para baixo quando o usuário clicar para cima, e vice-versa, quando o último item se torna o primeira ao clicar para baixo.
E a segunda é o onComplete, onde você pode setar uma função que será executada toda vez que a lista for reordenada. Nesta função você pode, por exemplo, fazer uma requisição Ajax que salvará a ordenação no seu banco de dados, onde você pode, para isso, acessar o atributo “list“, que contém a lista ordenada.

Exemplo | Download