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文本视为字符串并使用延迟动画，但效果不佳

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文本

1 个答案: