• ベストアンサー

メッセージ表示で

javascriptを使ってHMTLの中に異なる文章をタイプライター風に 表示することは可能ですか？(１行だけでなく。) javascriptで、ステータスバーに異なる文章を流す方法は いろいろと見つけることができるのですが。 以前、どこかのＨＰで見かけたんですが、ＵＲＬを忘れてしまったので。 どなたか教えてください。お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • peso
  • ベストアンサー率41% (40/97)
回答No.1

これは可能です。 一応自分で作ったそれらしいものがあるので参考になれば・・・・ タイプライター以外にいろいろやってますが・・・・ ちなみに、変数の宣言部分でほとんどの値を変化させることが出来ます。 (IE5 と　NN4.75　でテスト) <HTML> <HEAD> <SCRIPT language = "JavaScript"> <!-- /////////////////////////////////////////////////////////////////////////////////////////// var txtsrc = new Array(); var nowlen = 0; var nowgyo = 0; var mvcnt = 5; var timerID; var mouseon = false; var n_link = new Array(); var a_link = new Array(); var v_link = new Array(); var lback = new Array(); /////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////// var mailto = "http://www.goo.ne.jp"; var mladd = "gooへ"; txtsrc[0] = "あいうえお"; txtsrc[1] = "かきくけこ"; txtsrc[2] = "さしすせそ"; txtsrc[3] = ""; txtsrc[4] = mladd; var timecnt = 150; // タイプライトの速度(1000で1秒、カウントごとに1文字タイプ) var charmc = 100; // 斜め移動の速度(1000で1秒、カウントごとに右下へ1pix移動) var fonsz = 7; // 文字サイズ(1～7) var shadown = fonsz / 2; // 影の初期位置 var shadowp = 60; // 影の移動量 var foncol = new String("0000FF"); // 文字の色 var fonsdw = new String("BBBBFF"); // 影の色 n_link[0] = 0; n_link[1] = 0; n_link[2] = 255; // LINK の文字色(各0～255 RGB順) a_link[0] = 0; a_link[1] = 0; a_link[2] = 255; // ALINK の文字色(各0～255 RGB順) v_link[0] = 0; v_link[1] = 0; v_link[2] = 255; // VLINK の文字色(各0～255 RGB順) lback[0] = 255; lback[1] = 255; lback[2] = 256; // リンクメッセージの背景色(各0～255 RGB順) // 1つでも255を越えると透過色 var lstr = "gooへ移動しま～す"; // リンクメッセージの文字列 var lfcl = ("00FF00"); // リンクメッセージの文字色 var lfsz = 7; // リンクメッセージの文字サイズ(1～7) var lx = 30; // リンクメッセージのX座標(マウスを基準に,px) var ly = 30; // リンクメッセージのY座標(マウスを基準に,px) /////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////// var dummystr = "<FONT SIZE = " + fonsz + " COLOR = \'#" + foncol + "\'>"; var dummystr2 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + fonsdw + "\'>"; var dummystr3 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + foncol + "\'>"; var dummystr4 = "<FONT SIZE = " + fonsz + " COLOR = \'#" + fonsdw + "\'>"; var maxgyo = txtsrc.length; var mouseon = false; n_link[0] = (n_link[0] << 16) | (n_link[1] << 8) | n_link[2]; a_link[0] = (a_link[0] << 16) | (a_link[1] << 8) | a_link[2]; v_link[0] = (v_link[0] << 16) | (v_link[1] << 8) | v_link[2]; /////////////////////////////////////////////////////////////////////////////////////////// function mv(e){ // マウス移動時の処理用関数 // マウスがリンク上にある場合はポップアップレイヤーを表示する if (mouseon){ if (document.all){ document.all("layer3").style.top = event.offsetY + ly; document.all("layer3").style.left = event.offsetX + lx; document.all("layer3").style.visibility = "visible"; } else{ document.layer3.moveTo(e.pageX +lx, e.pageY + ly); document.layer3.visibility = "show"; } } } /////////////////////////////////////////////////////////////////////////////////////////// function m1(){ // マウスがリンクに重なったらポップアップレイヤーの表示を可能にする mouseon = true; } /////////////////////////////////////////////////////////////////////////////////////////// function m2(){ // マウスがリンクから離れたらポップアップレイヤーを隠す mouseon = false; if (document.all){ document.all("layer3").style.visibility = "hidden"; document.all("layer3").style.top = 1; document.all("layer3").style.left = 1; } else{ document.layer3.visibility = "hide"; } } /////////////////////////////////////////////////////////////////////////////////////////// function mvshadow(){ // 影移動関数 // 影を移動する if (mvcnt < (5 + shadowp)){ mvcnt++; if (document.all){ document.all("layer1").style.top = mvcnt + shadown; document.all("layer1").style.left = mvcnt + shadown; } else{ document.layer1.moveTo(mvcnt + shadown, mvcnt + shadown); } } // 影の移動終了後の処理 else{ clearInterval(timerID); // 本文と影をそれぞれリンク設定文字列とアンダーライン設定の文字列に置き換える if (document.all){ document.all("layer2").innerHTML = dummystr3; document.all("layer1").innerHTML = dummystr4; } else{ document.layer2.document.open(); document.layer2.document.write(dummystr3); document.layer2.document.close(); document.layer1.document.open(); document.layer1.document.write(dummystr4); document.layer1.document.close(); } // ポップアップレイヤーの準備 if (document.all){ document.all("layer3").style.visibility = "hidden"; document.all("layer3").innerHTML = "<FONT SIZE = " + lfsz + " COLOR = \'#" + lfcl + "\'>" + lstr + "</FONT>"; } else{ document.layer3.visibility = "hide"; document.layer3.document.open(); document.layer3.document.write("<FONT SIZE = " + lfsz + " COLOR = \'#" + lfcl + "\'>" + lstr + "</FONT>"); document.layer3.document.close(); document.captureEvents(Event.MOUSEMOVE); } // マウス移動時は mv 関数を呼び出す document.onmousemove = mv; } } /////////////////////////////////////////////////////////////////////////////////////////// function typewrite(){ // タイプライト関数 // 実際に表示する文字列を 1文字づつ抜き出して dummystr(本文用文字列) に格納 // 実際に表示する文字列を 1文字づつ抜き出して dummystr2(影用文字列) に格納 if (nowgyo < maxgyo){ if (nowlen < txtsrc[nowgyo].length){ dummystr += txtsrc[nowgyo].substr(nowlen, 1); dummystr2 += txtsrc[nowgyo].substr(nowlen, 1); nowlen++; } else{ nowlen = 0; nowgyo++; dummystr += "<BR>"; dummystr2 += "<BR>"; } // 抜き出した本文と影の文字列を書き出す if (document.all){ document.all("layer2").innerHTML = dummystr + "</FONT>"; document.all("layer1").innerHTML = dummystr2 + "</FONT>"; } else{ document.layer2.document.open(); document.layer2.document.write(dummystr + "</FONT>"); document.layer2.document.close(); document.layer1.document.open(); document.layer1.document.write(dummystr2 + "</FONT>"); document.layer1.document.close(); } } // 文字をすべて書き出し後の処理 else{ clearInterval(timerID); dummystr += "</FONT>"; dummystr2 += "</FONT>"; // 影移動関すの呼び出し timerID = setInterval("mvshadow()", charmc); } } /////////////////////////////////////////////////////////////////////////////////////////// function init(){ // 初期設定関数 // リンク色の設定 document.linkColor = n_link[0]; document.alinkColor = a_link[0]; document.vlinkColor = v_link[0]; // ポップアップレイヤーの背景色の設定 if ((lback[0] | lback[1] | lback[2]) <= 255){ if (document.all){ document.all("layer3").style.backgroundColor = ((lback[0] << 16) | (lback[1] << 8) | lback[2]); } else{ document.layer3.bgColor = ((lback[0] << 16) | (lback[1] << 8) | lback[2]); } } // 本文レイヤーと影レイヤーの初期位置へ移動 if (document.all){ document.all("layer1").style.left = 5 + shadown; document.all("layer1").style.top = 5 + shadown; document.all("layer2").style.left = 5; document.all("layer2").style.top = 5; } else{ document.layer1.moveTo(5 + shadown, 5 + shadown); document.layer2.moveTo(5, 5); } // 内部処理用に書き出す文字列を dummystr3 へリンクを設定して格納 // 内部処理用に書き出す文字列を dummystr4 へアンダーラインを設定して格納 for (cnt = 0; cnt < maxgyo; cnt++){ if (txtsrc[cnt] == mladd){ dummystr3 += "<A href = \'" + mailto + "\' onMouseOver = 'm1()' onMouseOut = 'm2()'>" + mladd + "</A>"; dummystr4 += "<U>" + mladd + "</U>"; } else{ dummystr3 += txtsrc[cnt]; dummystr4 += txtsrc[cnt]; } dummystr3 += "<BR>"; dummystr4 += "<BR>"; } dummystr3 += "</FONT>"; dummystr4 += "</FONT>"; // タイプライト関すの呼び出し timerID = setInterval("typewrite()", timecnt); } /////////////////////////////////////////////////////////////////////////////////////////// //--> </SCRIPT> </HEAD> <BODY> <NOBR> <DIV ID = "layer1" STYLE = "position:absolute"></DIV> <DIV ID = "layer2" STYLE = "position:absolute"></DIV> <DIV ID = "layer3" STYLE = "position:absolute"></DIV> </NOBR> <SCRIPT Language = "JavaScript"> <!-- /////////////////////////////////////////////////////////////////////////////////////////// init(); /////////////////////////////////////////////////////////////////////////////////////////// //--> </SCRIPT> </BODY> </HTML>

novaakira
質問者

補足

早い回答ありがとうございます。 レイヤーを使っての表示ですね。しかも表示した文字に影までつけて。 この表示の仕方も使わせていただきますが、今回、僕がやりたい事は、 “あいうえお”とタイプライター風に書いた後に、“あいうえお”を 消して、“かきくけこ”と表示したいのです。(同じ行に) var mes1="○○○"; var mes2="△△△"; var mes3="×××"; var mes=mes1+mes2+mes3; . . . として、テキストボックス内で表示させてみたのですが これだと○○○△△△×××と続けて書かれてしまうので....。 どうにかなりませんか？

その他の回答 (1)

  • xruz
  • ベストアンサー率50% (72/143)
回答No.2

こんにちはnovaakiraさん、xruzです。 こんな感じでしょうか？（Ie5.5sp2で動作確認） <html> <head> <title></title> </head> <script language="JavaScript"> <!-- var s=new Array( "あいうえお", "かきくけこ", "さしすせそ" ); var tid; var wln=new Array(); function tp(j,i) { clearTimeout(tid); with(document.f) { if(i==0) t.value=wln[j][i++]; else t.value=t.value+wln[j][i++]; if(i>=wln[j].length) { i=0; j++; } if(j==s.length) { return ; } else { tid=setTimeout("tp("+eval(j)+","+eval(i)+")",500);} }} function st() { for(var j=0;j<s.length;j++) { var w=new Array(); for(var i=0;i<s[j].length;i++) w[i]=s[j].substring(i,i+1); wln[j]=w; } tid=setTimeout("tp(0,0)",500); } //--> </script> <body onLoad="st();"> <form method="post" name="f"> <input type="text" name="t" size="20"> </form> </body> </html> がんばってくださいね(~:~i

novaakira
質問者

お礼

返事が遅くなってすみません。 テンパってました もう頭がチンプンカンプンで...... 配列ですか...... ちょっと僕の頭が配列を拒否してまして すみません。 ですが、確かに僕が実現したいようになってますね。 ただ、一度全てを表示した後、終了してしまいますね。 どーしたら良いものか。 ほんとに回答ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HPで文字を一文字ずつ出して表示させるには

    HPで、何行かの文章を、 タイプライターで打ったみたいに出すことをしたいのですが または、流れてくるようにでもいいかもしれませんが 最後に全部の行が表示された状態で止まって 終わらせたいのです。 JavaScriptのソースを一生懸命探しているのですが 似たようなのはあるのですが どうしても見つけることができません。 超初心者なので、 文字と、あと数字とかを入れかえるだけで使えるものでないと 使うことができません。 ご存知の方どうぞよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ステータスバーに表示されないURLを表示させる方法

    インターネットエクスプローラを使っていて、時々あるHPをステータスバーにリンク先のURLではなく挨拶や案内の文字等が表示される場合があります。 こういった場合かこのQ&Aでjavaスプリットを無効にすることによりURLが表示されるとありましたが、他に方法はありませんか？ フリーのツールまたはブラウザ等ありましたら教えてください。 よろしくお願いします。

  • javascript:void(0)のurl表示

    ブラウザはＦｉｒｅｆｏｘを使っています。 リンク先ＵＲＬがjavascript:void(0)と表示され、ステータスバーで確認できない事があるのが非常に不便です。 こういったリンク先のＵＲＬ表示に便利なツール・アドオン・greasemonkeyのスクリプトがあれば是非教えてください。

  • ワード・ステータスバーの行表示

    2002　XPを使用していますが、私の友達がワードのステータスバーにある 行・桁表示が消えて何行目かがわからないというのです。 このカテゴリの中でいつか見た気がしたのですが、検索しきれずに 質問させていただいてます。 解除方法を教えてください。よろしくお願いします。

  • Firefox ステータスバー変更検知

    Firefoxのステータスバーを変更できないようにする プラグインを探しています。 ステータスバーに、指定のURLを表示する等のJavaScriptを検知するものです。

  • ステータスバーのリンク先URLを常に表示させる（HPの文字列が表示され、URLが見えない）

    ステータスバーを表示させた状態で、マウスポインタをHP上のリンクのあるところに持っていくと、一瞬リンク先のURLが表示されるのですが、その後はHPの宣伝？などの文字列が表示されURLが見えなくなります。そこで、この文字列を表示させないようにし、ポインタをリンクのあるところに持っていくと常にリンク先URLを表示させるにはどのようにすれば良いですか？よろしくお願いします。 （以前は常に、リンク先URLが表示されていました。再セットアップを行ったところ現状のようになりました。以前、IEのツールを設定した気がします。） OS：Windows XP ブラウザ：IE8

  • ＩＥのバーの表示/非表示の方法を知りたい

    Internet Explorer 7で、ふだん使わないバーを非表示にしたいのですが。 図の第１行は「タイトルバー」、第３行は「メニューバー」ですよね。その他の行の名前を教えてください。「ツールバー」「ステータスバー」「エクスプローラバー」は、どれでしょうか。 これらの名前と使い方（表示/非表示の方法）を総合的に知りたいのですが、何を読めばよいのか、よろしくお願いします。

  • URLの非表示

    ステータスバーを無効にしているのですが、カーソルをリンクに合わせると、画面下にURLが浮かび上がるように表示されます。 これを消す方法はありますか。 IE１１です。

  • 『実行しましたが、ページでエラーが発生しました。』の表示

    転送URLを利用しています。 転送URLでＨＰにアクセスすると、「実行しましたが、ページでエラーが発生しました。」とステータスバーに表示されます。 クリックすると 「ライン:3　文字:1　エラー:アクセスは拒否されました　コード:0　URL:（実際のURL）」 「ライン:2　文字:926　エラー:アクセスは拒否されました　コード:0　URL:（実際のURL）」と表示されますが、何がいけないのか判りません。 そのページ内には、アクセス解析2種・フローティングフレーム・ステータスバーにメッセージの表示・HPにリンクが貼られるとRSSお知らせするという「track feed」というのを付けています。そして、この転送URLでアクセスすると、何故か「track feed」のアイコンが表示されないのです。 転送URLでなく、実際のURLにアクセスすると、ステータスバーのエラー表示もありませんし、「track feed」のアイコンも表示されています。 何故、転送URLでアクセスした時にのみ、エラーが出たり、アイコンが表示されなかったりするのでしょうか？ おわかりになる方がいらっしゃいましたら、ご回答宜しくお願いします。

  • リンク集をCSVファイルで管理し、JavaScriptで表示

    お世話になります。 いつも素晴らしいアドバイスをありがとうございます m(__)m 本日は【リンク集をCSVファイルで管理し、JavaScriptで表示】したく 投稿させていただきました。 ◇JavaScriptでCSVファイル読み込み表示 ５～１０個のリンクを表示したい 1行目はアンカーテキスト、2行目にURL ◇CSVのデータをランダムに表示 上記のようにJavaScriptで管理する方法が可能でしょうか。 アドバイスお願いいたします。 現在、JavaScriptの勉強を始めたまったくの素人でございます。 参考になるサイト、書籍の情報もお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する