DHTML応用のトップページです。
テキスト入力した文字をタイプ表示します。

---

【JavaScript/DHTMLのポイント】

タイプライタ

1. ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、初期設定をします。
   その後始めの歓迎文字列を後述の方法でタイプ表示します
2. タイプライタ印字は始めに宣言したレイヤ（Div) ほど背後に表示されることを考え、タイプする紙のレイヤLp, 紙の上に印字する文字列を表示する５つのレイヤL1〜L5、タイプボールのレイヤLb、タイプライタのレイヤLw、 入力テキスト、ボタン、説明文などのレイヤL0の順に宣言します。
   それぞれのレイヤ（文字列のレイヤは除く）にはその画（img) を貼り付けます。
3. 文字列の表示は５つの表示レイヤの一つに表示し、１行表示し終わると５つ全てを上へ移動します。
   １番上のレイヤは移動し終わると画面から飛び出しますので次回の表示位置に移動し、次の文字列を表示します。
4. 各文字列表示の時は表示するレイヤの現在の幅を求め、その位置にタイプボールを５ステップで移動したあと、次に表示する文字を加えた文字列をそのレイヤに表示します。
   表示後５ステップでタイプボールを元の位置に戻します。
   表示する文字は表示待ちの文字列（Otxt)から１文字ずつ切り出し表示文字列(Dtxt) に加えていきます。
   これらの動作はタイムアウト毎に次の動作(Function)を指定していくことで実現します。
5. 表示する文字列がなくなったとき、改行の指定がされたとき、１行幅が270ピクセル以上になったときは改行動作をします。
   改行動作は１０ステップで全文字列レイヤを上へ移動し、表示中文字列をクリアします。
6. 印字ボタンではテキストボックスの文字で印字開始します。
   中断ボタンではstopフラグを設定することで次の文字列印字前に中断します。
   再開ボタンはstopフラグをクリアしたあとタイマを起動し、印字を継続します。

---

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野 敏生 まで。