如何在 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);
  }
}

如何在 javascript 浏览器中动态打印 figlet 文本

How to dynamically print figlet text in javascript browser

javascript

figlet