Web覚書トップ > JavaScript サンプル > 『画面上の文字を動的に変更してみる』
説明

画面上に表示された文字を動的に変更させてみます。

実行例

▼正常に動作すれば、下の顔がキョロキョロします。

(^^  )

コード
var bwType = null;
var trgObj = null;
var nowFace = 1;

function bwCheck(){
	if ( document.all ) {
		return (1);
	} else if ( document.getElementById ) {
		return (2);
	} else if ( document.layers ) {
		return (3);
	} else {
		return (null);
	}
}

function formLoad( id ){
	bwType = bwCheck();
	switch ( bwType ) {
		case 1:
			trgObj = document.all( id );
			break;
		case 2:
			trgObj = document.getElementById( id );
			break;
		case 3:
			trgObj = document.layers[ id ];
			break;
		default:
			return;
	}
	setFace();
}

function setFace() {
	var face
	nowFace++;
	if ( nowFace == 5 ) { nowFace = 1; }
	switch ( nowFace ) {
		case 1:
			face = "(^^  )"
			break;
		case 2:
			face = "( ^^ )"
			break;
		case 3:
			face = "(  ^^)"
			break;
		case 4:
			face = "( ^^ )"
			break;
		default:
			return;
	}
	writeFace( face );
	setTimeout( "setFace()", 1000 );
}

function writeFace( face ) {
	if ( bwType == 1 ) {
		trgObj.innerText = face;
	} else if ( bwType == 3) {
		trgObj.document.open( "text/html" );
		trgObj.document.write( face );
		trgObj.document.close();
	}
}
<SPAN id="face" style="position:absolute;">(^^  )</SPAN>

解説&ステップアップ

レイヤーにしなければ、NN(確認ver.4.7)では変化しないなどの制限はありますが、画面上の文字を動的に変更できれば、色々と面白い処理を組むことができます。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)

© hyork@yahoo.co.jp (2001. 3.28)