11176 sujets

JavaScript, DOM et API Web HTML5

Bonjour, j'aimerais créer une succession de mots qui apparaissent lettre par lettre, avant de s'effacer. J'ai fais plusieurs essayes, mais aucun résultats convaincants. Mon premier programme fonctionne à peux près, mais la première lettre créée est aussi la première à s'effacer. Hors, j'aimerais que se soit le contraire. Dans le deuxième bout de code, j'essaye de résoudre le problème, sans grand succès. Est-ce que quelqu'un pourrais m'aider s'il vous plaît ? Merci d'avance.

const target = document.getElementById("target");
let array = ["beau", "fort", "intelligent"];
let wordIndex = 0;
let letterIndex = 0;

const createLetter = () => {
  const letter = document.createElement("span");
  target.appendChild(letter);

  letter.textContent = array[wordIndex][letterIndex];

  setTimeout(() => {
    letter.remove();
  }, 2800);
};

const loop = () => {
  setTimeout(() => {
    if (wordIndex >= array.length) {
      wordIndex = 0;
      letterIndex = 0;
      loop();
    } else if (letterIndex < array[wordIndex].length) {
      createLetter();
      letterIndex++;
      loop();
    } else {
      wordIndex++;
      letterIndex = 0;
      setTimeout(() => {
        loop();
      }, 4000);
    }
  }, 60);
};
loop();


const target = document.getElementById("target");
let array = ["beau", "fort", "intelligent"];
let wordIndex = 0;
let letterIndex = 0;

const createLetter = () => {
  const letter = document.createElement("span");
  target.appendChild(letter);

  letter.textContent = array[wordIndex][letterIndex];

  setTimeout(() => {
    letter.remove();
  }, 2800 + 100 * (array[letterIndex].length + 1) - 100 * letterIndex);
};

const loop = () => {
  setTimeout(() => {
    if (wordIndex >= array.length) {
      wordIndex = 0;
      letterIndex = 0;
      loop();
    } else if (letterIndex < array[wordIndex].length) {
      createLetter();
      letterIndex++;
      loop();
    } else {
      wordIndex++;
      letterIndex = 0;
      setTimeout(() => {
        loop();
      }, 4000);
    }
  }, 60);
};
loop();

Modifié par Yuuno (05 Sep 2021 - 02:41)