如何逐字写一个字?

时间:2013-12-19 04:58:00

标签: javascript animation text

一个字是如何逐字写的。它应该有一个接一个地出现一些接一个的延迟这是代码。

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

1 个答案:

答案 0 :(得分:3)

基本上你一次写一个字符并且介于两者之间。 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