Вывод строки по одному символу JavaScript [закрыт]

105
18 октября 2019, 23:50

подскажите, есть строка, хочу вывести ее в хтмл по буквенно, одна за одной с каким-то интервалом, разбиваю строку с помощью split(), и как теперь ее лучше собрать ?в setTimeout/setInterval через join() или как то циклом перебирать и побуквенно каждый елемент массива вписывать в строку или это все не то?

Answer 1

let str = 'строка'; 
const root = document.querySelector('#root'); 
 
str.split('').forEach((elem, indx) => { 
  setTimeout(() => { 
    root.textContent += elem; 
  }, 500*indx) 
});
<div id ="root"></div>

Answer 2

Наверно, перебор для данной задачи, но пусть будет и такой вариант: :)

function show() { 
  let txt = document.getElementById('txt').value; 
  let pt = new PrintText(txt); 
  pt.print(); 
  let pt2 = new PrintText(txt, 'result2', 1000); 
  pt2.print(); 
} 
 
class PrintText { 
  constructor(txt, outId = 'result', interval = 500) { 
    let el = document.getElementById(outId); 
    if (!el) { 
      el = document.createElement('div'); 
      document.body.appendChild(el); 
    } 
    this.element = el; 
    this.txt = txt; 
    this.interval = interval; 
    this._curChar = 0; 
  } 
  print() { 
    this.timer = setInterval(this._printNext.bind(this), this.interval); 
  } 
  _printNext() { 
    this.element.textContent += this.txt[this._curChar++]; 
    if (this.txt.length == this._curChar) clearInterval(this.timer); 
  } 
}
<input id="txt" type="text" value="Sample text"/> 
<input type="button" value="Show text" onclick="show();" />

READ ALSO
Сервер ( PHP ) и клиент на Python для игры

Сервер ( PHP ) и клиент на Python для игры

Я создал клиент игры на Python ( что-то типо кликера в консольном виде, потому-что GUI для меня темный лес ), но мне нужен сервер который будет на php и с помощью...

135
Парсинг HTML таблицы в файл

Парсинг HTML таблицы в файл

нужна помощь с парсингом, есть сайт с множеством компаний https://wwwinvesting

140
Динамика шрифтов, CSS

Динамика шрифтов, CSS

подскажите пжл, есть ли в CSS возможность задавать размерность шрифта динамично?

111
Сдвиг блоков CSS друг к другу

Сдвиг блоков CSS друг к другу

Есть блоки на bootstrapМне нужно их сдвинуть друг к другу ближе

109