如何在javascript瀏覽器中動態打印figlet文本

Question

我正在使用這段代碼片段在java腳本中生成一個figlet文本，但我希望它能夠制作動畫，就像逐行打印字符一樣，最后是最終的figlet。

代碼生成figlet

function writeFiglet(){
figlet("Ausi", 'Dancing Font', function(err, text) {
  if (err) {
    console.log('something went wrong...');
    console.dir(err);
    return;
  }
  // typeWriter(text);
  document.write("<pre>"+text+"</pre>");
});

這個生成一個正常的即時figlet但我想花一些時間來打印。

我嘗試了以下技巧將figlet文本視為字符串並使用延遲動畫，但它沒有奏效

function typeWriter(text) {
  var i = 0;
  var speed = 50;
  if (i < text.length) {
    document.getElementById("demo-pre-element").innerText += text.charAt(i);
    ++i;
    setTimeout(typeWriter, speed);
  }
}

Answer 1

實際上你的邏輯是有道理的 請嘗試這樣的事情

var charac = [];
function showFiglet(){
figlet("Ausi", 'Dancing Font', function(err, text) {
  if (err) {
    console.log('something went wrong...');
    console.dir(err);
    return;
  }
  var i = 0;
  var lengths = text.length;
  console.log("length is "+ lengths);
  while (i < lengths) {
    ++i;
    charac.push(text.charAt(i));
  }
  console.log(charac.toString());
    typeWriter();
});

var i = 0;
var speed = 50;
function typeWriter() {

  if (i < charac.length) {
    console.log(charac[i] + " element at " + i);
    document.getElementById("demo").innerText += charac[i];
    i++;
    setTimeout(typeWriter, speed);
  }
}