2
votes

Machine à écrire Javascript () sur deux lignes

Je crée donc un site Web de base et j'ai utilisé la fonction machine à écrire de w3schools:

https://www.w3schools.com/howto/howto_js_typewriter.asp

Mon problème est que je veux afficher le texte sur 2 lignes, et je ne sais pas trop comment pour faire ça. Tout aide!

Merci

<span id='demo'></span>

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

javascript jquery html css

1 commentaires

Que voulez-vous dire par Je veux afficher le texte sur 2 lignes ?

4 Réponses :

3
votes

Vous voudriez y avoir un .

Vous pouvez faire quelque chose comme ceci:

<span id='demo'></span>

var i = 0;
var txt = `Lorem ipsum dummy \n text blabla.`;
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    let text = txt.charAt(i);
    document.getElementById("demo").innerHTML += text=== "\n" ? "<br/>": text;
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

0 commentaires

1
votes

Vous pouvez indiquer les zones dans lesquelles vous souhaitez ajouter votre texte à une classe telle que typer , afin de pouvoir cibler plusieurs éléments. Ensuite, vous pouvez utiliser getElementsByClassName pour obtenir tous les éléments avec la classe typer . En utilisant .forEach , vous pouvez ensuite boucler sur tous vos éléments (dans ce cas divs) et leur ajouter le caractère approprié.

Voir l'exemple de travail ci-dessous:

p >

<p id='demo'></p>

#demo {
  width: 100px;
}

Maintenant, si par plusieurs lignes vous voulez dire que vous voulez que votre texte se brise lorsqu'il atteint une largeur particulière, vous pouvez à la place utiliser une balise de paragraphe ( p ) et définir une largeur en utilisant CSS:

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<div class="typer"></div>

<div class="typer"></div>

var i = 0;
var txt = 'Lorem ipsum typing effect!'; /* The text */
var speed = 50; /* The speed/duration of the effect in milliseconds */

function typeWriter() {
  if (i < txt.length) {
    [...document.getElementsByClassName("typer")].forEach(e => {
      e.innerHTML += txt.charAt(i);
    })
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

0 commentaires

1
votes

Vous pouvez utiliser ici.

<h1>Typewriter</h1>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var firstLineMaxChars = 10

function typeWriter() {
  if (i < txt.length) {
    var char = txt.charAt(i)

    if (i == firstLineMaxChars) {
      char += '</br>'
    }

    document.getElementById("demo").innerHTML += char;
    i++;
    setTimeout(typeWriter, speed);
  }
}

0 commentaires

1
votes

On ne sait pas quels critères séparent le texte sur la deuxième ligne. Vous pouvez, par exemple, simplement définir la largeur du div à envelopper sur un mot. Cela permet de garantir que tout le texte sera enveloppé, quelle que soit sa durée, sans qu'il soit nécessaire de modifier la chaîne.

<div id="demo"></div>

#demo {
  width: 100px;
  word-wrap: break-word;
}

const txt = 'Lorem ipsum typing effect!... MOAR Lorem ipsum typing effect!';
const speed = 50;

// Cache the element
const demo = document.getElementById("demo");

// If i is not defined set it to 0
(function typeWriter(i = 0) {
  if (i < txt.length) {

    // Use textContent rather than innerHTML
    demo.textContent += txt.charAt(i);
    setTimeout(typeWriter, speed, ++i);
  }
}())

0 commentaires