Мне нужно, чтобы текст для ввода всего типа оставался на странице некоторое время, прежде чем исчезнуть для второго цикла

#javascript #html #css

#javascript #HTML #css

Вопрос:

1. Мне нужно, чтобы текст для ввода всего типа оставался на дисплее после его полной записи перед вторым циклом. Пожалуйста, примените решение к моему коду.

2. Во-вторых, в моей текстовой строке, когда я использую теги «b» или «strong» для выделения определенного текста жирным шрифтом, знак «<» отображается в течение нескольких миллисекунд во время ввода, то же самое происходит со всеми другими тегами. Я не знаю, что не так с моим кодом.

Ниже приведен мой код.

Показать фрагмент кода

 for (let i = 0; i < 10; i  ) {
  task(i);
}

function task(i) {
  setTimeout(function() {
    // Add tasks to do 
    var typeString = ['• I m Mr.Frits.n• and   I <b>love </b> Pakistan...:)'];
    var i = 0;
    var count = 0
    var selectedText = '';
    var text = '';
    
    (function type() {
      if (count == typeString.length) {
        count = 0;
      }

      selectedText = typeString[count];
      text = selectedText.slice(0,   i);
      document.getElementById('typing').innerHTML = text.fontsize(6);
      document.getElementById('typing').style.fontFamily = "monospace";
      document.getElementById("typing").style.color = "black";
      document.getElementById("typing").style.fontWeight = "normal";

      if (text.length === selectedText.length) {
        count  ;
        i = 0;
      }

      /* SOLUTION : wait two seconds when new line */
      if (typeString[0][i - 1] == 'n') {
        setTimeout(type, 1000);
      } else {
        setTimeout(type, 100);
      }
    }());
  }, 1000);
}

 <pre id="typing"></pre>

Развернуть фрагмент

Ответ №1:

Поскольку значение count устанавливается 1 после достижения длины конца строки, вы можете добавить условие и увеличить время ожидания, если это выполнено:

 /* SOLUTION : wait two seconds when new line */
if (typeString[0][i - 1] == 'n') {
    setTimeout(type, 1000);
} else if (count === 1) {
    setTimeout(type, 3000);
} else {
    setTimeout(type, 100);
}

С <br /> помощью ‘s браузер не регистрирует его как действительный HTML, пока тег не будет завершен. Итак, на секунду все, что отображается, выполняется < до завершения остальной части тега, и он понимает, что это за тег.

Показать фрагмент кода

 for (let i = 0; i < 10; i  ) {
  task(i);
}

function task(i) {
  setTimeout(function() {
    // Add tasks to do 
    var typeString = ['• I m Mr.Frits.n• and   I love  Pakistan...:)'];
    var i = 0;
    var count = 0;
    var selectedText = '';
    var text = '';
    var typing = document.getElementById('typing');

    (function type() {
      if (count == typeString.length) {
        count = 0;
      };

      selectedText = typeString[count];
      text = selectedText.slice(0,   i);
      typing.innerHTML = text.fontsize(6);
      typing.style.fontFamily = "monospace";
      typing.style.color = "black";
      typing.style.fontWeight = "normal";

      if (text.length === selectedText.length) {
        count  ;
        i = 0;
      }

      /* SOLUTION : wait two seconds when new line */
      if (typeString[0][i - 1] == 'n') {
        setTimeout(type, 1000);
      } else if (count === 1) {
        setTimeout(type, 3000);
      } else {
        setTimeout(type, 100);
      }
    }());
  }, 1000);
}

 <pre id="typing"></pre>

Развернуть фрагмент

1. @Danial_knights 50% проблема решена, поскольку текст остался. Но цикл также останавливается. Можем ли мы установить время, в течение которого текст останется, и второй цикл начнется через несколько секунд.

2. Также, каково альтернативное решение для выделения определенных символов жирным шрифтом? Спасибо

3. Обновил мой фрагмент. Чтобы выделить определенные символы жирным шрифтом, вам нужно будет обернуть их в интервал с font-weight: bold , прежде чем вставлять его.