id指定した要素内のテキストを、0.5秒毎に一文字ずつ順番に表示させるJavaScriptサンプル。
実装例（サンプル）
一文字ずつ表示する。
実装例の動作について
ページを読み込むと、赤い背景のボックスに、「一文字ずつ表示する。」というテキストを、0.5秒毎に、先頭から順に一文字ずつ表示する。全て表示し終わると、一度全て消し、再度一文字ずつ表示する。
ソースコード
JavaScript
<script type="text/javascript">
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()', 500 );
}
</script>
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()', 500 );
}
</script>
HTML
<div id="sample"> 一文字ずつ表示する。</div>
CSS
<style type="text/css">
#sample {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: red;
color: white;
text-align: left;
border-radius: 10px;
}
</style>
#sample {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: red;
color: white;
text-align: left;
border-radius: 10px;
}
</style>