Untitled

<!DOCTYPE html>
<html>
<body>

<div id="content"></p>

<script>
// Phrase a ecrire
var sentence = "Ouh, la grosse boulette.";
// Nous avons dans une phrase "N caracteres + 1" (il faut compter le <br> comme un caractere unique).
var sentence_length = sentence.length + 1;

// Nombre de ligne a ecrire.
var line_number = 200;

// Ecrire le caractere toutes les X milliseconds.
var print_char_every_ms =  1 * 10;


// Cette fonction sert a afficher un seul et unique caractere de la phrase de base.
function print_char(index) {
    // L'index est egale au Nieme caractere que nous voulons print.
    // ligne 1
    // O = 0
    // u = 1
    // h = 2
    // ...
    // e = 19
    // t = 20
    // t = 21
    // e = 22
    // . = 23
    // <br> = 24

    // ligne 2
    // O = 25
    // u = 26
    // h = 27
    // ...
    // e = 43
    // t = 44
    // t = 45
    // e = 46
    // . = 47
    // <br> = 48

    setTimeout(function()
    {
        var content = document.getElementById("content");
        // Postion dans la phrase d'origine (math).
        var position = index % sentence_length;

        // Si la position est egale au dernier caractere de la phrase, on affiche le <br>.
        if (position === sentence_length - 1)
        {
            content.innerHTML += "<br>";
        }
        else // Sinon, on affiche le caractere a la position de la phrase d'origine.
        {
            content.innerHTML += sentence[position];
        }
    }, index * print_char_every_ms) // on affiche le caractere voulu toutes les X milliseconds.
                                    // Index va de 0 a "line_number * sentence_length"
                                    // print_char_every_ms = 10ms
                                    // ligne 1
                                    // O = 0 * 10ms
                                    // u = 1 * 10ms
                                    // h = 2 * 10ms
                                    // ...
                                    // ligne 2
                                    // O = 25 * 10ms
                                    // u = 26 * 10ms
                                    // h = 27 * 10ms
                                    // ...


}


// Pourquoi faire ca plutot que d'appeler le setTimeout directement ici
// https://coderwall.com/p/_ppzrw/be-careful-with-settimeout-in-loops
for (var index = 0; index < (line_number * (sentence_length)) - 1; ++index)
{
    print_char(index);
}

</script>

</body>
</html>