イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.44 - リアルタイムに時間を表示する/div>
|
リアルタイムに日時を表示してみます。 |
| Step テーマ ● innerHTML - 指定した要素の内容を書き換える |
実行例こんにちは
|
リスト<SCRIPT type="text/javascript"><!-- myWeek=new Array("日","月","火","水","木","金","土"); function myFunc(){ myDate=new Date(); myMsg = myDate.getFullYear() + "年"; myMsg += ( myDate.getMonth() + 1 ) + "月"; myMsg += myDate.getDate() + "日"; myMsg += "(" + myWeek[myDate.getDay()] + "曜日)"; myMsg += myDate.getHours() + "時"; myMsg += myDate.getMinutes() + "分"; myMsg += myDate.getSeconds() + "秒"; document.getElementById("myIDdate").innerHTML = myMsg; } // --></SCRIPT> <DIV id="myIDdate">こんにちは</DIV> <SCRIPT type="text/javascript"><!-- setInterval( "myFunc()", 1000 ); // --></SCRIPT> |
| サンプルだけの HTMLは こちらへ |
説明Step.5 でフォームに リアルタイムに日付を表示しました。 今回は innerHTML をつかって、リアルタイムに日付を表示してみます。 ※古臭いブラウザ を完全に見捨てます。 <DIV id="myIDdate">こんにちは</DIV> このタグ内の文字を 日時に書き換えます。 document.getElementById("myIDdate").innerHTML = myMsg; innerHTML は、指定要素の内容を変更してくれます。 今回は 日時の文字列 myMsg を セットして、「こんにちは」を 書き換えました。 あとは、いつもの setInterval でループして、リアルタイムに表示です。説明はいらないでしょう。 setInterval( "myFunc()", 1000 ); ※ もろもろは Step.5 を参照。 ● 古臭いブラウザ対応 ログ [IE4] document.all("myIDdate").innerHTML = myMsg; [NN4] document.layers["myIDdate"].document.open(); document.layers["myIDdate"].document.write(myMsg); document.layers["myIDdate"].document.close(); 参考ステップ Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう Step.45 文字色をリアルタイムに変更してみましょう Step.46 背景色をリアルタイムに変更してみましょう Step.47 フォントサイズをリアルタイムに変更してみましょう |
 |