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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

これは可能です。


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

こんにちは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&Aと関連する良く見られている質問

Q【javascript】URLからkeycode入力するjavascript付与する方法を教えてくだ

【javascript】URLからkeycode入力するjavascript付与する方法を教えてください。

Aベストアンサー

(1)URLからkeycode入力する
(2)javascript付与する

それぞれについて意味不明なのでもうすこし具体的になさったほうがよいかと

Q入力した文字をステータスバーに流したい

フォームに入力された文字をステータスバーに流したいのですがどうしてもわかりません。(動かさずに表示させることは出来ました。)

<html>
<body>
<form method="post">
文章を入力してください<br>
<input type="text" size="30" onchange="a(this)">
</form>
</body>
</html>
<script language="javascript">

function a(t){
tt=t.value;
nagasa=tt.length;
text=tt.substring(2,nagasa) + tt.substring(0,2);
window.status=text;
setTimeout("a('"+text+"')",1000);
}

自分でも何かおかしいと思うのですがどうしても思いつけません。
わかる方教えてください。よろしくお願いします。

Aベストアンサー

いろいろとあるので、順番に行きます。

・a()に渡されている引数が違う
onChange時にa()にthisを渡していますが
a()内ではtextを渡しています。
onChange時にthis.valueを渡す様にしましょう。

・停止を行っていない
onChangeで行う場合、変更がある度に
a()が実行されるので、複数の文字がステータスバーを
流れる事になります。
という事で、onChangeでa()が実行される度に
その前に動いていたa()を止めないといけません。

・<script>の場所がおかしい
これは直接関係ありませんが、<script>が<html>~</html>の
外にあります。
一応動くようですが、ブラウザによっては動かないかもしれません。

a()の停止処理があるので、1個functionを間に挟んだ形での
サンプルです。
--------------- ここから -----------------
<html>
<head>
<script language="javascript">
<!--
var pid = 0; //setTimeoutのプロセスID
var doing = false; //a()実行フラグ

function loop_string( txt ){
if( doing ){
clearTimeout(pid);
}
if( txt.length > 0 ){
pid = a(txt);
} else {
doing = false;
}
}
function a(t){
var t_len = t.length;
var t_str = t.substring(2,t_len) + t.substring(0,2);
window.status = t_str;
pid = setTimeout("a('" + t_str + "')",1000);
doing = true;
}
//-->
</script>
</head>
<body>
<form method="post">
文章を入力してください<br>
<input type="text" size="30" onchange="loop_string(this.value);">
</form>
</body>
</html>
------------- ここまで ----------------

いろいろとあるので、順番に行きます。

・a()に渡されている引数が違う
onChange時にa()にthisを渡していますが
a()内ではtextを渡しています。
onChange時にthis.valueを渡す様にしましょう。

・停止を行っていない
onChangeで行う場合、変更がある度に
a()が実行されるので、複数の文字がステータスバーを
流れる事になります。
という事で、onChangeでa()が実行される度に
その前に動いていたa()を止めないといけません。

・<script>の場所がおかしい
これは直接関係ありませんが、<script>...続きを読む

Qjavascriptでよく見かける構文で、object.addEventListener(event

javascriptでよく見かける構文で、object.addEventListener(event,eventhandler,false)とありますが、第三引数にfalseと書くのはどのような意味があるからなのでしょうか?

また、省略した場合としない場合ではどのような違いがあるのかも教えていただけるとありがたいです。

Aベストアンサー

第三引数はuseCaptureの指定。全てで省略可能とは限らないけれど、省略した場合はfalseの意となるようです。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

Qjavascriptでurlを取得

javascript、ごくごく初心者です。

Facebookにshareさせたい自ページURLをjavascriptで取得したいと思いますが、
なかなかうまくいきません。

よろしくお願いいたします。

<meta property="og:url" content="ここにアドレス取得" />

Aベストアンサー

自分で作ったページに置いたJavaScriptで、Facebook内のページを取得するということですよね。

JavaScriptでは、他ドメインのURLを取得することはできません。
自分のHPからあるサイトを小ウィンドウ(JavaScriptで制御)に呼び出しても、小ウィンドウから元ウィンドウは参照が可能ですが、逆は参照できません。
直接呼び出したページは、呼び出しに使ったURLがあるので取得しているように見えますが、実際は不可能です。
同じドメイン内では、子ウィンドウをリンクを使って遷移させても、URLを参照できましたが、他サイトで同じことをするとURLを取得することができません。

QjavascriptでURLを取得するには?

pcafeさん(http://pcafe.blog3.fc2.com/blog-entry-372.html)にあるようなことを、ブログ上でなくてホームページ上で実現したいと思っています。

上記のサイト様を踏まえた上で、どのようなことがしたいかと言いますと、下記のようなことをしたいと思っています。
サンプル図:http://lancerevolution.tuzikaze.com/sampletest.html

(1)http://×××.blog×.fc2.com/blog-entry-1.htmlのリンクをクリックし、新規ウィンドウでmenu.htmlを開く
(2)http://×××.blog×.fc2.com/blog-entry-1.htmlの「1」をインラインフレームの「src」に代入して、1.htmlのファイルを(3)に表示させる
*子のウィンドウのURLではなくて、親のウィンドウのURLを対象にして、その数字に応じたhtmlファイルを(3)に表示させます
つまり、
◆http://×××.blog×.fc2.com/blog-entry-1.htmlと言うページがあった時に、子ウィンドウのインラインフレームに
<iframe src="="./file/1.html"></iframe>
◆http://×××.blog×.fc2.com/blog-entry-2.htmlと言うページがあった時に、子ウィンドウのインラインフレームに
<iframe src="="./file/2.html"></iframe>
        ・
        ・
◆http://×××.blog×.fc2.com/blog-entry-300.htmlと言うページがあった時に、子ウィンドウのインラインフレームに
<iframe src="./file/300.html"></iframe>
にしたいということです。

*インラインフレームがある部分は、menu.htmlと言うページしか使わないので、ページ1つ1つにsrcは設定できません。設定できるのは、menu.htmlのみです。そのため、pcafeさんのやり方がどうしてもしたいのです。

長くなりましたが、どうぞよろしくお願いします。

pcafeさん(http://pcafe.blog3.fc2.com/blog-entry-372.html)にあるようなことを、ブログ上でなくてホームページ上で実現したいと思っています。

上記のサイト様を踏まえた上で、どのようなことがしたいかと言いますと、下記のようなことをしたいと思っています。
サンプル図:http://lancerevolution.tuzikaze.com/sampletest.html

(1)http://×××.blog×.fc2.com/blog-entry-1.htmlのリンクをクリックし、新規ウィンドウでmenu.htmlを開く
(2)http://×××.blog×.fc2.com/blog-entry-1.htmlの「1」をイン...続きを読む

Aベストアンサー

今表示しているhtmlのurlを調べるなら多分これ
http://www.tohoho-web.com/js/location.htm


人気Q&Aランキング

おすすめ情報