【问题标题】:How to write a word letter by letter?一个字一个字怎么写?
【发布时间】:2013-12-19 04:57:59
【问题描述】:

一个单词是如何一个字母一个字母地书写的。它应该会出现一个又一个的字母,但会有一些延迟。这是代码。

var txt = 'animating text';
var current = 0;

function write(text){
   var elem = document.getElementById('target');
   if (current < text.length){
      elem.textContent = elem.textContent + text.charAt(current);
      current++;
      wait(100);
   }
}

Write(txt);

【问题讨论】:

  • 如何判断用户是否阅读了这封信?最终目标是什么?到目前为止,您尝试过什么?
  • 与用户无关。这里唯一要做的就是一个一个地打印字母。实际上,如果您看到我的链接,它会非常吸引人。以“这是一个测试”这个句子为例。然后首先显示“T”。 100 毫秒后出现“h”,依此类推...

标签: javascript animation text


【解决方案1】:

基本上你一次写一个字符,中间有一个超时。 Here's the fiddle.及以下代码

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat ante sed fringilla bibendum. In quam elit, rutrum quis adipiscing id, iaculis eu ipsum. Morbi faucibus lectus at ante feugiat dignissim. In turpis turpis, placerat in fringilla eget, sodales blandit lacus. Vivamus tempor blandit mauris nec semper. Sed cursus metus sed justo cursus bibendum. Maecenas ornare sem sed lacinia auctor. Nulla sapien dolor, faucibus vitae dapibus in, commodo id est. Sed a ipsum laoreet, convallis lacus eu, hendrerit magna.';

// Variable for current position
var curr = 0;

var Write = function write(){

    // Find the target element to write to
    var elem = document.getElementById('target');

    // Append next character into the text content
    elem.textContent = elem.textContent + text.charAt(curr);

    // Update the current position
    curr++;

    // if we're not yet in the end of the string
    // we have a little (20ms) pause before we write the next character
    if (curr < text.length)
        window.setTimeout(write, 20);
};

Write(); // And of course we have to call the function

【讨论】:

  • 这正是我问的。完美的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-08
  • 2014-08-13
  • 1970-01-01
  • 2023-03-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多