Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafhael Henrique

Efeito de maquina de escrever

Por , em Javascript

Recommended Posts

Rafhael Henrique    0

Rafhael Henrique
Postado

Ola pessoal,

Preciso sabe como fazer o efeito "maquina de escrever", onde eu tenho um texto definido e as letras aparece na tela sendo escritas como num teclado ou maquina de escrever letra por letra formando a palavra. Alguém manja?

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

itlpps    109

itlpps
Postado

Fonte: http://www.scriptbrasil.com.br/download/codigo/2239/

Baixei o código desse site ai, porém tive que editar, não estava funcionando...

Mas agora está:

<html>
<head>
<!-- Copiar dentro del tag HEAD -->
<script language="JavaScript">
<!--
var isIE4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1); 
var isNN4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appName).indexOf("Netscape") != -1); 
tID = 0;
i = 0;
spd  = 50; 
str= "Seu texto maroto bem aqui YEAH!"
function typeLayer() {
 if(i >  str.length){
  clearTimeout(tID);
 } else {
  msg = str.substring(0,i);
  if(isNN4 == true){
   document.getElementById('layer1').innerHTML ='<font face="Arial" color="#004080">'+msg.fontsize(2)+'</font>';
   //document.getElementById('layer1').document.close();
  }
  if(isIE4 == true){
   document.getElementById('layer1').innerHTML = '<strong><font face="Arial" color="#004080">'+msg.fontsize(2)+'</font></strong>';
  }
  i++;
  tID = setTimeout("typeLayer()",spd);
 }
}
//-->
</script>




</head>


<!-- Copiar dentro del tag BODY -->
<body onload="typeLayer()" onunload="clearTimeout(tID)">
<span id="layer1" style="position: absolute; left: 10px; top: 20px"></span>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thales Caricati    3

Thales Caricati
Postado

Fala Rafhael, tudo certo?

Apesar de existir muitos códigos prontos na internet que faça exatamente isso, é importante você entender como funciona cada parte do código. Dependendo do seu grau de experiência com a linguagem vale mais a pena você fazer um script desses do zero. Isso se sua vontade é realmente desenvolver software e ser um bom programador.

Desenvolver em JS é bem de boa, mas precisamos tomar alguns cuidados em determinados pontos, saber trabalhar com recursividade ajuda muito.

O Javascript nos disponibiliza a função setInterval, assim como o nome já diz, ele define o intervalo de algo, nesse caso podemos usar o setInterval para executar nossa função para máquina de escrever.

Trabalhar com DOM apenas, sem usar uma biblioteca te ajuda bastante a entender esse processo. Desenvolvi um código simples para que você possa entender e trabalhar em cima.

Veja aqui no JSFiddle:

https://jsfiddle.net/3rj9gyes/

Flw, vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafhael Henrique    0

Rafhael Henrique
Postado

Fala Rafhael, tudo certo?

Apesar de existir muitos códigos prontos na internet que faça exatamente isso, é importante você entender como funciona cada parte do código. Dependendo do seu grau de experiência com a linguagem vale mais a pena você fazer um script desses do zero. Isso se sua vontade é realmente desenvolver software e ser um bom programador.

Desenvolver em JS é bem de boa, mas precisamos tomar alguns cuidados em determinados pontos, saber trabalhar com recursividade ajuda muito.

O Javascript nos disponibiliza a função setInterval, assim como o nome já diz, ele define o intervalo de algo, nesse caso podemos usar o setInterval para executar nossa função para máquina de escrever.

Trabalhar com DOM apenas, sem usar uma biblioteca te ajuda bastante a entender esse processo. Desenvolvi um código simples para que você possa entender e trabalhar em cima.

Veja aqui no JSFiddle:

https://jsfiddle.net/3rj9gyes/

Flw, vlw!

Ola Thales tudo certo cara.

Concordo com a sua visão, sou programador backend e front (por obrigação rsrsr) e na maioria das vezes prefiro criar meus próprios códigos ao invés de pegar algo pronto pq eu sei que preciso compreender o funcionamento dele se quiser criar uma aplicação realmente boa.

Manjo de js mas como estou com um projeto grande não queria perder muito tempo com essa função e fui atras de código pronto, mas a sua lógica esta totalmente clara, simples e direta, então vou adapta-la e usa-la no meu projeto.

Obrigado pela ajuda. Vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafhael Henrique    0

Rafhael Henrique
Postado

Fonte: http://www.scriptbrasil.com.br/download/codigo/2239/

Baixei o código desse site ai, porém tive que editar, não estava funcionando...

Mas agora está:

<html>
<head>
<!-- Copiar dentro del tag HEAD -->
<script language="JavaScript">
<!--
var isIE4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1); 
var isNN4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appName).indexOf("Netscape") != -1); 
tID = 0;
i = 0;
spd  = 50; 
str= "Seu texto maroto bem aqui YEAH!"
function typeLayer() {
 if(i >  str.length){
  clearTimeout(tID);
 } else {
  msg = str.substring(0,i);
  if(isNN4 == true){
   document.getElementById('layer1').innerHTML ='<font face="Arial" color="#004080">'+msg.fontsize(2)+'</font>';
   //document.getElementById('layer1').document.close();
  }
  if(isIE4 == true){
   document.getElementById('layer1').innerHTML = '<strong><font face="Arial" color="#004080">'+msg.fontsize(2)+'</font></strong>';
  }
  i++;
  tID = setTimeout("typeLayer()",spd);
 }
}
//-->
</script>




</head>


<!-- Copiar dentro del tag BODY -->
<body onload="typeLayer()" onunload="clearTimeout(tID)">
<span id="layer1" style="position: absolute; left: 10px; top: 20px"></span>
</body>
</html>

Obrigado pela ajuda cara, valeu :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito