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