サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> JavaScript >> テキストを一定間隔で画面に表示する

テキストを一定間隔で画面に表示する

 IE 4.0↑    未対応
オススメ度:    設置難易度:


サンプルと機能

Sample 1:ページを表示すると同時に一定間隔で画面に表示する
Sample 2:ボタンをクリックすると一定間隔で画面に表示する

指定したテキストを一定間隔で画面に表示することができます。
Netscape Navigatorには対応していません。


サンプルスクリプト

緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー&貼り付けして編集してください。

Sample 1:ページを表示すると同時に一定間隔で画面に表示する
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// テキストを一定間隔で画面に表示する
spd = 1000; // 表示する間隔
str = new Array();
// タグを入れる場合、「"」の前に「\」を付ける
str[0] = "サンプルサンプルサンプル";
str[1] = "<FONT color=\"#ff0000\">一定間隔で表示しています。</FONT>";
str[2] = "<FONT color=\"#009900\">一定間隔で表示しています。</FONT>";
str[3] = "<FONT color=\"#0000ff\">一定間隔で表示しています。</FONT>";
str[4] = "<FONT color=\"#ff00ff\" size=\"1\">サンプルサンプルサンプル</FONT>";
str[5] = "<FONT color=\"#0099ff\" size=\"2\">サンプルサンプルサンプル</FONT>";
str[6] = "<FONT color=\"#ff9900\" size=\"3\">一定間隔で表示しています。</FONT>";
str[7] = "<FONT color=\"#999999\" size=\"4\">一定間隔で表示しています。</FONT>";
str[8] = "<FONT color=\"#cccccc\" size=\"5\">一定間隔で表示しています。</FONT>";
str[9] = "出力を終了します。";
cnt = 0;
function setText() {
  if (cnt >= str.length) return;
  txt = "";
  cnt++;
  for (i=0; i<cnt; i++) txt = str[i];
  if (document.all) document.all["ID"].innerHTML = txt;
  setTimeout("setText()",spd);
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff" onLoad="setText()">
以下にテキストを1文字ずつ画面に表示します。<BR><BR>
<DIV id="ID" style="position:absolute;"></DIV>
</BODY>
</HTML>

Sample 2:ボタンをクリックすると一定間隔で画面に表示する
Sample 1とほぼ同じですので省略します。
サンプルページより「右クリック」→「ソースの表示」でプログラムを確認できます。


解説・注意点など

テキストを追加する場合は、
str[10] = "text";
str[11] = "text";
といったように"str[ ]"の中の数字を一つずつ増やしていってください。


 
 

JavaScriptに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, JavaScript Samples. All rights reserved. - Home