He estado intentando crear un programa de animación de escritura que crea una animación de escribir una palabra. Cada período de tiempo (1 segundo), agrega una letra a la salida, aparentemente "escribiendo" la palabra. Aquí está mi código:
let input = document.querySelector("#input"); let text = document.querySelector("#text"); let run = document.querySelector("#run"); let str = input.value; run.onclick = function() { text.innerText = ""; str = input.value; let chars = []; for (let i = 0; i < str.length; i++) { chars[i] = str.charAt(i); } for (let i = 0; i < chars.length; i++) { setTimeout(function() { text.innerText += chars[i]; }, 1000) } }Aquí hay una implementación usando setInterval .
Como Andy mencionó en los comentarios, solo busque y encontrará muchas otras implementaciones y respuestas aquí en SO.
let input = document.querySelector("#input"); let text = document.querySelector("#text"); let run = document.querySelector("#run"); run.addEventListener("click", function() { text.innerText = ""; const str = input.value; const chars = str.split(""); const interval = setInterval(()=>{ if ( !chars.length ){ return clearInterval(interval); } text.textContent += chars.shift(); }, 100 ); }); <input id="input" value="Hello world" /> <p id="text"></p> <button id="run">Run</button>