複数行の文字列を一文字づつ表示

説明

文字列をタイプライターのように一文字ずつ表示します。よくあるサンプルと違い、複数行の文字列でも正常にできます。

サンプル

ソースコード

HEADに記述
<script language="JavaScript"> <!-- var tID = 0; var textID = 0; var i = 0; var j = 0; var msgText = new Array(); var str = new Array() var HTML= new String; var oldText = new String; var tSpd = 20; //■文字を表示する速さ(1/1000秒) var sSpd = 1000; //■行を変える時の速さ(1/1000秒) str[0] = "どうもこんにちは。"; str[1] = "ここの名前はWrite-Off!!です。"; str[2] = "英語で｢ポンコツ｣という意味の口語体です。"; str[3] = "これからもごひいきに。"; //■str[4]、str[5]と増やしていける(タグ不可) function typeLayer() { if(document.getElementById){ var layer1 = document.getElementById("layer1") } if(j >= str.length){ clearTimeout("tID"); } else{ if(i > str[j].length){ oldText=oldText+msgText[j]+"<br>" i=0; j++; clearTimeout("textID"); tID = setTimeout("typeLayer()",sSpd); } else{ msg = str[j].substring(0,i); msgText[j]=msg; HTML=oldText+msgText[j]; if(layer1.innerHTML != undefined){ layer1.innerHTML = '<font color=blue size=4>'+HTML+'</font>'; } else if(document.layers){ document.layers['layer1'].document.write('<font color=blue size=4>'+HTML+'</font>'); document.layers['layer1'].document.close(); } i++; textID=setTimeout("typeLayer()",tSpd) } } } //--> </script>

HEADに記述

<script language="JavaScript">
<!--
var tID = 0;
var textID = 0;
var i = 0;
var j = 0;
var msgText = new Array();
var str = new Array()
var HTML= new String;
var oldText = new String;

var tSpd = 20;   //■文字を表示する速さ(1/1000秒)
var sSpd = 1000; //■行を変える時の速さ(1/1000秒)

str[0] = "どうも こんにちは。";
str[1] = "ここの名前はWrite-Off!!です。";
str[2] = "英語で｢ポンコツ｣という意味の口語体です。";
str[3] = "これからもごひいきに。";
//■str[4]、str[5]と増やしていける(タグ不可)

function typeLayer() {
	if(document.getElementById){
		var layer1 = document.getElementById("layer1")
	}
	if(j >= str.length){
		clearTimeout("tID");
	} else{
		if(i > str[j].length){
			oldText=oldText+msgText[j]+"<br>"
			i=0;
			j++;
			clearTimeout("textID");
			tID = setTimeout("typeLayer()",sSpd);
		} else{
			msg = str[j].substring(0,i);
			msgText[j]=msg;
			HTML=oldText+msgText[j];
		
		if(layer1.innerHTML != undefined){
			layer1.innerHTML = '<font color=blue size=4>'+HTML+'</font>';
		} else if(document.layers){
			document.layers['layer1'].document.write('<font color=blue size=4>'+HTML+'</font>');
			document.layers['layer1'].document.close();
		}
		
		i++;
		textID=setTimeout("typeLayer()",tSpd)
		}
	}
}
//-->
</script>

BODYに記述
<body onLoad="typeLayer()" onUnload="clearTimeout(tID)"> <SPAN ID="layer1" STYLE="position:absolute;"></SPAN>