Skip to main content
adicionando uma possivel correção sem utilizar RxJS
Fonte Link
WesLipe
  • 71
  • 2
  • 10

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.length; i++) {
      setTimeout(() => element.innerHTML += soletra[i], 75 * i);
   }
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

// ATUALIZAÇÃO - Versão sem o RxJS //

TypeScript:

  export class Componente1Component implements OnInit {
        frase = '';
        ngOnInit() {
    
          const soletra = 'Oi tudo bem?'.split('').reverse();
          const soletrar = (a) => {
            this.frase += a;
            if (soletra.length > 0) {
              setTimeout(() => soletrar(soletra.pop()), 75)
            }
          }; 
}

HTML: nao alterei

<h3 id="nome"> {{ frase }} </h3>

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.length; i++) {
      setTimeout(() => element.innerHTML += soletra[i], 75 * i);
   }
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.length; i++) {
      setTimeout(() => element.innerHTML += soletra[i], 75 * i);
   }
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

// ATUALIZAÇÃO - Versão sem o RxJS //

TypeScript:

  export class Componente1Component implements OnInit {
        frase = '';
        ngOnInit() {
    
          const soletra = 'Oi tudo bem?'.split('').reverse();
          const soletrar = (a) => {
            this.frase += a;
            if (soletra.length > 0) {
              setTimeout(() => soletrar(soletra.pop()), 75)
            }
          }; 
}

HTML: nao alterei

<h3 id="nome"> {{ frase }} </h3>
removeu 1 caractere do conteúdo
Fonte Link
WesLipe
  • 71
  • 2
  • 10

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.forEach((letra,length; posicaoi++) => {
      setTimeout(() => element.innerHTML =+= "letrasoletra[i], 75 * posicao"i);
    });
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    soletra.forEach((letra, posicao) => {
      setTimeout(() => element.innerHTML = "letra, 75 * posicao");
    });
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    for(let i = 0; i < soletra.length; i++) {
      setTimeout(() => element.innerHTML += soletra[i], 75 * i);
   }
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)

Fonte Link
WesLipe
  • 71
  • 2
  • 10

Como alterar o HTML através do TypeScript (Angular 2)?

Estou tentando criar um efeito de "maquina de escrever" onde uma letra é inserida após a outra. O código está assim:

TypeScript:

TypeWriter() {
    let element = <HTMLInputElement>document.getElementById("nome");
    let frase = "Oi tudo bem?";
    let soletra = frase.split('');
    soletra.forEach((letra, posicao) => {
      setTimeout(() => element.innerHTML = "letra, 75 * posicao");
    });
  }

HTML:

<h3 id="nome"> Split: </h3>

O problema é que não está funcionando. A idéia é que cada letra da frase "Olá bom dia" seja inserida no html (element.innerHTML) a cada 75 milissegundos (a multiplicação serve pra que as letras nao sejam inseridas ao mesmo tempo, portanto a letra do vetor 1 será inserida 75 milissegundos + a posicao (75 + 1) depois da letra no vetor 0)