如何使文本出现在javascript类型书写效果中的下一行

debugcn 发表于 Dev

年

我正在使用 java 脚本打字效果在我的网页上显示报价。我已经做到了，但我的问题是我希望作者的名字在右下角，但与文本一起出现。我该怎么做？

这是我的代码

document.addEventListener('DOMContentLoaded', function(event) {
  // array with texts to type in typewriter
  var dataText = ["Start by doing whats necessary;\n\then do whats impossible;and\n\then suddenly you are doing the impossible;\n\-Francis of Assisi"];

  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
      document.querySelector("h3").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
    }
  }
  // start a typewriter animation for a text in the dataText array
  function StartTextAnimation(i) {
    if (typeof dataText[i] == 'undefined') {
      setTimeout(function() {
        StartTextAnimation(0);
      }, 20000);
    }
    // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
      typeWriter(dataText[i], 0, function() {
        // after callback (and whole text has been animated), start next text
        StartTextAnimation(i + 1);
      });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

<div style="position: relative;width:490px;">
        <h3 style=" font-family: 'pacifico',cursive;font-size: 30px">Hello</h3></div>

乔丹·乔治亚迪斯

或者你可以生成一些像这里的代码

var dataText = ["Start by doing whats necessary;\n\then do whats impossible;and\n\then suddenly you are doing the impossible;\n\<div id="+"author>-Francis of Assisi</div>"];

...制作一个 div 以更好地管理 css

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。