電子書籍の厳選無料作品が豊富！

メッセージ表示で

解決済

  • 質問者：novaakira
  • 質問日時：
  • 回答数：2件

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

以前、どこかのＨＰで見かけたんですが、ＵＲＬを忘れてしまったので。
どなたか教えてください。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： peso
  • 回答日時：

これは可能です。


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

この回答への補足

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

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

var mes1="○○○";
var mes2="△△△";
var mes3="×××";
var mes=mes1+mes2+mes3;
.
.
.
として、テキストボックス内で表示させてみたのですが
これだと○○○△△△×××と続けて書かれてしまうので....。
どうにかなりませんか？

補足日時：2001/11/14 18:47
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： xruz
  • 回答日時：

こんにちは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
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2001/12/05 17:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報