Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

280
Visualizações
How to procedurally subtract text, then repopulate said text to certain amount

I have this script that creates a "typing" effect when implemented. I want it to be able to delete the last word in the sentence, and then "retype" that section with a new word. So for example, something like "This is the original text" is typed out and then it deletes the last 4 letters in the same way it typed it out, and replaces it with "This is the original script", if that makes any sense.

typewriter.js:

var arrText = new Array("This is the original text"); // Array of text to be "typed"
var speed = 80; // Delay speed as text "types" out. Lower value = faster speed
var index = 0; // Start position for the typing effect
var arrLength = arrText[0].length; // Length of the text array

var textPos = 0; // Initialize text position
var contents = ""; // Initialize contents variable

function typewriter() {
  // Aqcuire the destination of the typewriter ID
  var destination = document.getElementById("typewriter");

  // Initiate the innerHTML of the destination, with an initial carat value
  destination.innerHTML =
    contents +
    arrText[index].substring(0, textPos) +
    "<span class='blink'>█<span>";
  // If textPos hasn't reached the array length, increase textPos value
  if (textPos++ != arrLength) {
    setTimeout("typewriter()", speed);
  } else {
    // Subtract text code here???
  }
}

// Wait specified time (in milliseconds) before starting script
setTimeout(typewriter, 500);

index.html:

<div id="typewriter"></div>

style.css

.blink {
  animation: blink-animation 1400ms steps(2, start) infinite;
  -webkit-animation: blink-animation 1400ms steps(2, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda