как добавить в строку елементы массива с выводом в html

Question

есть код

 var word_bank=["тестовая реплика","проверка функционала"]
     var click=-1
     var i=0
     var word_handler=0
     var symbol_count=word_bank[word_handler].length
     $("body").click(function(event){
    var interval1=setInterval(function(){ 
    ++click
    ///тут в теории решение
  

     i++
     if(i==symbol_count){
       word_handler++
       click=-1
       i=0
       clearInterval(interval1)
     
      
     }
     },100) })

необходимо выводить собственно по клику мыши выводить каждый раз символы с массива в строку а после в DOM но суть в том что я хочу имитировать печать(именно по этому и нужен интервал),дабы символы появлялись не сразу а поочередно подскажите какие есть способы реализации подобного еффекта

Answer 1

Можешь что-то такое сделать..

var text = `Привет вам задушевный, братья,<br>
Со всех Славянщины концов,<br>
Привет наш всем вам, без изъятья!<br>
Для всех семейный пир готов!<br>
Недаром вас звала Россия<br>
На праздник мира и любви;<br>
Но знайте, гости дорогие,<br>
Вы здесь не гости, вы – свои!<br><br>

Вы дома здесь, и больше дома,<br>
Чем там, на родине своей, –<br>
Здесь, где господство незнакомо<br>
Иноязыческих властей,<br>
Здесь, где у власти и подда́нства<br>
Один язык, один для всех,<br>
И не считается Славянство<br>
За тяжкий первородный грех!<br><br>

Хотя враждебною судьбиной<br>
И были мы разлучены,<br>
Но всё же мы народ единый,<br>
Единой матери сыны;<br>
Но всё же братья мы родные!<br>
Вот, вот что ненавидят в нас!<br>
Вам не прощается Россия,<br>
России – не прощают вас!<br><br>

Смущает их, и до испугу,<br>
Что вся славянская семья<br>
В лицо и недругу и другу<br>
Впервые скажет: «Это я!»<br>
При неотступном вспоминанье<br>
О длинной цепи злых обид<br>
Славянское самосознанье,<br>
Как божья кара, их страшит!<br><br>

Давно на почве европейской,<br>
Где ложь так пышно разрослась,<br>
<i>Давно наукой фарисейской<br>
Двойная правда создалась:</i><br>
Для <i>них</i> – закон и равноправность,<br>
Для нас – насилье и обман,<br>
И закрепила стародавность<br>
<i>Их</i> как наследие славян.<br><br>

И то, что длилося веками,<br>
Не истощилось и поднесь<br>
И тяготеет и над нами –<br>
Над нами, собранными здесь...<br>
Еще болит от старых болей<br>
Вся современная пора...<br>
Не тронуто Косово поле,<br>
Не срыта Белая Гора!<br><br>

А между нас – позор немалый<br>
В славянской, всем родной среде,<br>
Лишь тот ушел от их опалы<br>
И не подвергся их вражде,<br>
Кто для своих всегда и всюду<br>
Злодеем был передовым:<br>
<i>Они</i> лишь нашего Иуду<br>
Честят лобзанием своим.<br><br>

Опально-мировое племя,<br>
Когда же будешь ты народ?<br>
Когда же упразднится время<br>
Твоей и розни и невзгод,<br>
И грянет клич к объединенью,<br>
<i>И рухнут те, что делят нас?..</i><br>
Мы ждем и верим провиденью –<br>
Ему известны день и час...<br><br>

И эта вера в правду бога<br>
Уж в нашей не умрет груди,<br>
Хоть много жертв и горя много<br>
Еще мы видим впереди...<br>
Он жив – верховный промыслитель,<br>
И суд его не оскудел,<br>
И слово Царь-освободитель<br>
За русский выступит предел...<br><br>

Тютчев Ф. И.<br><br>
Начало мая 1867`;

let i = 0;
let out = document.getElementById("text");
let img = document.getElementById('united_nations');
let timeout;

function go(t) {
  i++;
  if (i <= t.length) out.innerHTML = t.substr(0, i);
  if (out.innerHTML.includes(''))
    if (i == t.length) {
      img.innerHTML = '<img src="https://www.dorogavrim.ru/img/flagi/flag_rossiya.jpg"><img src="https://www.dorogavrim.ru/img/flagi/flag_belarus.jpg"><img src="https://www.dorogavrim.ru/img/flagi/flag_ukraina.jpg"><img src="https://www.dorogavrim.ru/img/flagi/flag_serbiya.jpg">';
      return clearTimeout(timeout);
    }
  timeout = setTimeout(() => {
    go(t);
    window.scrollTo(0, parseFloat(window.getComputedStyle(out).height));
  }, 75, t);
}

go(text);

img {
  width: 100px;
  height: 60px;
  margin: 1em;
  box-shadow: 0 0 0 1px black;
}

#text {
  font-size: 18px;
  letter-spacing: 0.02em;
}

i {
  color: red;
  text-decoration: underline;
}

<div id='text'></div>
<div id='united_nations'></div>

БЛОГ НА HUSL

как добавить в строку елементы массива с выводом в html

Ответы (1 шт):