OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

メッセージ表示で

  • 困ってます
  • 質問No.168616
  • 閲覧数79
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 53% (55/103)

javascriptを使ってHMTLの中に異なる文章をタイプライター風に
表示することは可能ですか?(1行だけでなく。)
javascriptで、ステータスバーに異なる文章を流す方法は
いろいろと見つけることができるのですが。

以前、どこかのHPで見かけたんですが、URLを忘れてしまったので。
どなたか教えてください。お願いします。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.1
レベル9

ベストアンサー率 41% (40/97)

これは可能です。
一応自分で作ったそれらしいものがあるので参考になれば・・・・
タイプライター以外にいろいろやってますが・・・・
ちなみに、変数の宣言部分でほとんどの値を変化させることが出来ます。
(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

お礼率 53% (55/103)

早い回答ありがとうございます。

レイヤーを使っての表示ですね。しかも表示した文字に影までつけて。
この表示の仕方も使わせていただきますが、今回、僕がやりたい事は、
“あいうえお”とタイプライター風に書いた後に、“あいうえお”を
消して、“かきくけこ”と表示したいのです。(同じ行に)

var mes1="○○○";
var mes2="△△△";
var mes3="×××";
var mes=mes1+mes2+mes3;
.
.
.
として、テキストボックス内で表示させてみたのですが
これだと○○○△△△×××と続けて書かれてしまうので....。
どうにかなりませんか?
投稿日時 - 2001-11-14 18:47:54
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル10

ベストアンサー率 50% (72/143)

こんにちはnovaakiraさん、xruzです。 こんな感じでしょうか?(Ie5.5sp2で動作確認) <html> <head> <title></title> </head> <script language="JavaScript"> <!-- var s=new Array( & ...続きを読む
こんにちは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

お礼率 53% (55/103)

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


このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ