Brincando de Javascript: "Efeito" Typewritter

[Henrique Barcelos 290]

Sabe aquele efeito no qual uma letra é adicionada por vez na tela, como se alguém tivesse digitando???

 

Com essas 2 funçõeszinhas que eu fiz isso é possivel em JS.

 

//© Henrique José Pires Barcelos (22/03/2009)
			
			function carregando(){
				conteudo = document.getElementById("msg");
				var caracteres = new Array;
				caracteres[0] = " / ";
				caracteres[1] = " - ";
				caracteres[2] = " \\ ";
				var num = 0;
				intervaloCarregando = setInterval(function(){
					conteudo.innerHTML = "Carregando..." + caracteres[num];
					num++;
					
					if (num == 3) {
						num = 0;
						
					}
					
				}, 100, "intervalo")
			}
			
			function tipewritter(){
				var msg = prompt("Digite aqui sua mensagem:", "Efeito Tipewritter em Javascript (por Henrique)");
				var tamanhoMsg = msg.length;
				var conteudo = document.getElementById("msg");
				var i = 0;
				var carUnderline = "_";
				
				carregando();
				setTimeout(function(){
					clearInterval(intervaloCarregando);
					intervaloTypeW = setInterval(function(){
						conteudo.innerHTML = msg.substr(0, i) + carUnderline;
						i++;
						if (i - 1 == tamanhoMsg) {
							carUnderline = "";
							clearInterval(intervaloTipeW);
						}
					}, 100);
				}, 2000);
				
				
			}
			
			window.onload = tipewritter;

Aproveitem xD...

[guhfloripa 0]

mano nao esta funcionando, erro na linha 4 nao manjo nada de javascript se puder corrigir agradeco valeu

[Henrique Barcelos 290]

Fiz algumas modificações:

 

function carregando(){
				conteudo = document.getElementById("msg");
				var caracteres = new Array;
				caracteres[0] = " / ";
				caracteres[1] = " - ";
				caracteres[2] = " \\ ";
				var num = 0;
				intervaloCarregando = setInterval(function(){
					conteudo.innerHTML = "Carregando..." + caracteres[num];
					num++;
					
					if (num == 3) {
						num = 0;
						
					}
					
				}, 100, "intervalo")
			}
			
			function tipewritter(){
				var msg = "Formatando C:. <br/>Todo o conteúdo do seu disco rígido será apagado. <br/>Esperamos sinceramente que tenha feito backup dos seus arquivos.";
				var tamanhoMsg = msg.length;
				var conteudo = document.getElementById("msg");
				var i = 0;
				var carUnderline = "_";
				
				carregando();
				setTimeout(function(){
					clearInterval(intervaloCarregando);
					intervaloTypeW = setInterval(function(){
						conteudo.innerHTML = msg.substr(0, i) + carUnderline;
						i++;
						if (i - 1 == tamanhoMsg) {
							carUnderline = "";
							clearInterval(intervaloTipeW);
						}
					}, 100);
				}, 2000);
				
				
			}

Só não esquece o elemento HTML:

 

<div id="msg">
</div>

[Max 775 0]

Bacana cara...

Pra quem gosta de brincar com javascript eu recomendo Javascript

 

 

________________________________________________________________________________

_______

Criação de site em Cuiabá

[Henrique Barcelos 290]

window.onload = tipewritter;

Eu tinha colocado essa linha no final do primeiro post xD...

 

Tipo... eu sei q jQuery tem seus brinquedinhos... mas prefiro fazer os meus...

[Luiz™ 0]

Gostei muito desse efeito..

 

Bem legal mesmo, queria saber brincar assim rsrs

 

Parabéns!