一文字ずつ文字を表示する

 一文字ずつ文字を動かすサンプルとHTMLです。

 
一文字ずつ表示する。

<script type="text/javascript">

//<![CDATA[

var $text, $textCurrent, $counter;

window.onload = function () {

    $text = document.getElementById( "sample" ).firstChild.nodeValue;

    displayOneByOne();

}

function displayOneByOne() {

    $textCurrent = document.getElementById( "sample" ).firstChild.nodeValue;

    if( $textCurrent.length == $text.length ){

        document.getElementById( "sample" ).innerHTML = '';

        $counter = 0;

    }

    document.getElementById( "sample" ).innerHTML = $text.substr( 0, ++$counter ) + '<br />';

    setTimeout( 'displayOneByOne()', 300 );

}

//]]>

</script> 

<div style="color:#FF33FF;background:#ffffff;border:3px solid #00CC33; padding:10px">

    <div id="sample">

        一文字ずつ表示する。

    </div>

</div>

 

 * 参考にしたサイトは、 こちら です。