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

【问题标题】：How to dynamically print figlet text in javascript browser如何在javascript浏览器中动态打印figlet文本
【发布时间】：2018-06-15 20:08:18
【问题描述】：

我正在使用此代码 sn-p 在 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 文本视为字符串并使用延迟进行动画，但效果不佳

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);
  }
}

【问题讨论】：

标签： javascript figlet

【解决方案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);
  }
}

【讨论】：