Question

我正在使用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>

Answer 1

添加了\n替换<br>

＆＃13;

document.addEventListener('DOMContentLoaded', function(event) {
  // array with texts to type in typewriter
  var dataText = ["\nStart by doing whats necessary;\nthen do whats impossible;and\nthen suddenly you are doing the impossible;\n\t-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).replace(/\n/g, '<br/>').replace(/\t/g, '<span class="spacer"></span>') + '<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);
});

＆＃13;

.spacer {
  width: 200px; 
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 2

或者您可以像这里一样生成一些代码

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>"];

...为更好的css管理做一个div

Answer 3

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; <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;  -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>

如何使文字显示在javascript类型书写效果的下一行

3 个答案: