A Tecnologia da Informação mais próxima de você.

25 janeiro 2012

Ilustração quase lá

É claro que é o Steve Jobs.

Ainda falta umas 3 horas de ilustração.

Mas quem não reconheceu, acredito que não o conheça.

 

Ilustração Steve Jobs

Ilustração Steve Jobs

Publicado nas categorias : Design, Illustrator
Confira as tags relacionadas : ,

Curta a nossa página no Facebook: Ou visite-a clicando aqui.

Carregando data e hora com Javascript

O exemplo abaixo carrega data e hora do computador.

Copie o código abaixo:

 

  1. function construirArray(qtdElementos){
  2. this.length = qtdElementos
  3. }
  4. var arrayDia = new construirArray(7);
  5. arrayDia[0] = “Domingo”;
  6. arrayDia[1] = “Segunda-Feira”;
  7. arrayDia[2] = “Terça-Feira”;
  8. arrayDia[3] = “Quarta-Feira”;
  9. arrayDia[4] = “Quinta-Feira”;
  10. arrayDia[5] = “Sexta-Feira”;
  11. arrayDia[6] = “Sábado”;
  12. var arrayMes = new construirArray(12);
  13. arrayMes[0] = “Janeiro”;
  14. arrayMes[1] = “Fevereiro”;
  15. arrayMes[2] = “Março”;
  16. arrayMes[3] = “Abril”;
  17. arrayMes[4] = “Maio”;
  18. arrayMes[5] = “Junho”;
  19. arrayMes[6] = “Julho”;
  20. arrayMes[7] = “Agosto”;
  21. arrayMes[8] = “Setembro”;
  22. arrayMes[9] = “Outubro”;
  23. arrayMes[10] = “Novembro”;
  24. arrayMes[11] = “Dezembro”;
  25. function mostrarDataHora(hora, diaSemana, dia, mes, ano){
  26. retorno = “  “+hora+” “;
  27. retorno += “  ”+diaSemana+”, “+dia+” de “+mes+” de “+ano;
  28. document.getElementById(“datahora”).innerHTML = retorno;
  29. }
  30. function getMesExtenso(mes){
  31. return this.arrayMes[mes];
  32. }
  34. function getDiaExtenso(dia){
  35. return this.arrayDia[dia];
  36. }
  37. function atualizarDataHora(){
  38. dataAtual = new Date();
  39. dia = dataAtual.getDate();
  40. diaSemana = getDiaExtenso(dataAtual.getDay());
  41. mes = getMesExtenso(dataAtual.getMonth());
  42. ano = dataAtual.getYear();
  43. hora = dataAtual.getHours();
  44. minuto = dataAtual.getMinutes();
  45. segundo = dataAtual.getSeconds();
  46. horaImprimivel = hora + “:” + minuto + “:” + segundo;
  47. mostrarDataHora(horaImprimivel, diaSemana, dia, mes, ano+1900);
  48. setTimeout(“carregarDataHora()”,1000);
  49. }

 

Salve-o como “data.js”.

 

 

Abra um arquivo novo “index.html” e cole o código:

Dentro do Head :

  1. <script type=”text/javascript” src=”data.js”></script>

 

 

E no Body:

  1. <body onload=”carregarDataHora()”>
  2. <div id=”datahora”></div>
  3. </body>

 

 

Teste e veja o resultado.

 

 

 

Publicado nas categorias : Javascript, Programação
Confira as tags relacionadas : , , , ,

Curta a nossa página no Facebook: Ou visite-a clicando aqui.

24 janeiro 2012

Animação simples com jQuery

Este é um pequeno exemplo de animação com jQuery. Claro que a parte mais importante são os seletores, que aqui estão apenas expressos por class e id.

 

Marca jQuery

 

Copie o código, cole no Dreamweaver e salve como “jquery.html” e veja o resultado.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>Página usando jQuery</title>
  6. <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
  7. <script type=”text/javascript”>
  8. $(document).ready(function(){
  9. $(‘#botao’).click(function(){
  10. $(‘.anima’).animate({‘marginLeft’:’250px’},1000);
  11. });
  12. $(‘.anima’).css(‘background-color’, ‘#09F’);
  13. $(‘.anima’).css(‘width’, ’50px’);
  14. $(‘.anima’).css(‘height’, ’50px’);
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <input type=”button” value=”Clique aqui para animar” id=”botao” />
  20. <div class=”anima”></div>
  21. </body>
  22. </html>

 

 

Veja o exemplo abaixo:

 

 

Publicado nas categorias : Animação, Dreamweaver, Javascript, jQuery, Programação, Webdesign
Confira as tags relacionadas : , , , ,

Curta a nossa página no Facebook: Ou visite-a clicando aqui.
Página 18 de 27« Primeira...10...1617181920...Última »
Desenvolvido por Big Bang Digital