Как создать эффект бесконечной печати?

Question

Даньяр

html , верстка , javascript , веб-разработка

Как создать эффект бесконечной печати?

Как можно улучшить циклическое повторение эффекта набора текста в коде JS, если стандартный цикл while не работает? Вот часть кода для примера: 
```javascript
var quality = document.getElementById("quality");
var i = 0;
var txt = "Креативность";
var speed = 85;
var x = 0;
function typeWriter() {
  if (i < txt.length) {
    quality.innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
txt = "Креативность";
typeWriter();
setTimeout(() => {
  quality.innerHTML = "";
  txt = "000000000000Эффективность";
  typeWriter();
  setTimeout(() => {
    quality.innerHTML = "";
    txt = "0000000000000000000000000Индивидуальность";
    typeWriter();
  }, 2500);
}, 2000);
```

13 августа 2024 г. 9:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания эффекта бесконечной печати вам нужно внести некоторые изменения в ваш код. Вместо использования setTimeout внутри функции typeWriter, вы можете изменить функцию typeWriter так, чтобы она сбрасывала переменные i и txt каждый раз, когда текст полностью набран. 

Пример:

```javascript
var quality = document.getElementById("quality");
var i = 0;
var txt = "";
var speed  85;

function typeWriter() {
  quality.innerHTML += txt.charAt(i);
  i++;
  if(i == txt.length) {
    i = 0;
    quality.innerHTML = "";
  }
  setTimeout(typeWriter, speed);
}

txt = "Креативность";
setInterval(() => {
  txt = "Креативность";
}, 3000); 

typeWriter();
```

Таким образом, этот код будет продолжать циклически повторяться, набирая текст "Креативность" каждые 3 секунды. 

Надеюсь, это поможет вам улучшить циклическое повторение эффекта набора текста в вашем коде JS.

Answer 2

class Typewriter {
  constructor(element, text, speed) {
    this.element = element;
    this.text = text;
    this.speed = speed;
    this.index = 0;
  }

  start() {
    this.type();
  }

  type() {
    if (this.index < this.text.length) {
      this.element.innerHTML += this.text.charAt(this.index);
      this.index++;
      setTimeout(() => this.type(), this.speed);
    } else {
      this.index = 0;
      this.element.innerHTML = "";
      setTimeout(() => this.type(), this.speed);
    }
  }
}

const qualityElement = document.getElementById("quality");
const TEXT = "Креативность Эффективность Индивидуальность ";
const SPEED = 85;

const typewriter = new Typewriter(qualityElement, TEXT, SPEED);
typewriter.start();