- ベストアンサー
タイプライター風 part２
以前、pesoさん、xruzさんに教えられたこと等をもとに 以下のようなscriptを作成しました。 ／／／／／／／ <head> <script language="javascript"> <!-- str1="わしはしばらく出てこないよーーー "; str2="しばらく出てこないよーーー "; str3="出てこないってばーーー "; blnk = " "; str = str1+blnk; cnt=0; mcnt = 0; msg = ""; stcnt=0; i=0; timeID = 10; function type(){ if(i<=str.length){ if(document.all){ stcnt++; if (stcnt>3){ stcnt = 0; msg += str.substring(mcnt,mcnt+1); mcnt++; if (mcnt >= str.length) { mcnt=0; msg=""; } } csr = " "; if (stcnt & 1) csr ="＿"; myText.innerHTML=msg+csr; } else if(document.layers) { document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; clearTimeout(timeID); timeID=setTimeout("type()",50); } else{ i=0; clearTimeout(timeID); timeID=setTimeout("type()",50); } } //--> </script> </head> <body bgcolor="#cccccc" onload="type()"> <div id="myText" style="position:absolute;top:20;left:20;"></div> </body> pesoさん、xruzさん、ありがとうございました。これでほぼ、僕の作りたい スクリプトができました。(不要なところもありますが......) ですが、このままだとstr1のみしか表示されず、str2、str3は表示され ません。(当然ですが) str1を表示した後にstrにstr2、str3を入れるにはどうしたらいいので しょうか？(以前、xruzさんに教えていただいたスクリプトを永遠に 続けるような感じです。)
- novaakira
- お礼率53% (55/103)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
はーいnovaakiraさん、xruzです。 これでいいでしょうか？ <head> <script language="javascript"> <!-- str1="わしはしばらく出てこないよーーー "; str2="しばらく出てこないよーーー "; str3="出てこないってばーーー "; blnk = " "; str = str1+blnk; cnt=0; mcnt = 0; msg = ""; stcnt=0; i=0; j=0; timeID = 10; function type(){ if(i<=str.length){ if(document.all){ stcnt++; if (stcnt>3){ stcnt = 0; msg += str.substring(mcnt,mcnt+1); mcnt++; if (mcnt >= str.length) { mcnt=0; msg=""; switch (j) { case 0: {j++; str=str2+blnk; break;} case 1: {j++; str=str3+blnk; break;} case 2: {j=0; str=str1+blnk; break;} } } } csr = " "; if (stcnt & 1) csr ="＿"; myText.innerHTML=msg+csr; } else if(document.layers) { document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; clearTimeout(timeID); timeID=setTimeout("type()",50); } else{ i=0; clearTimeout(timeID); timeID=setTimeout("type()",50); } } //--> </script> </head> <body bgcolor="#cccccc" onload="type()"> <div id="myText" style="position:absolute;top:20;left:20;"></div> </body></html> がんばってくださいね(~:~i
その他の回答 (2)
- peso
- ベストアンサー率41% (40/97)
すいません、前回の所に配列は苦手、っていうようなことが書いてありましたね。 まぁ、せっかくなんでこれを機会に配列を覚えましょう。 var str = new Array(); ←配列の宣言は 変数 = new Array() のようにします。 str[0] = "わしはしばらく出てこないよーーー "; str[1] = "しばらく出てこないよーーー "; str[2] = "出てこないってばーーー "; 配列の要素は 配列の名前[数字] になります。（javascriptでは 0 から始まります。） 例えば、警告ダイアログに しばらく出てこないよーーー を 表示したい場合は alert str[1]; のようになります。 で、この[ ]の中の数字のことを添字といいます。普通はこの添字に変数を使うことが多いです。 変数を使って配列の中身(今回は ”しばらく出てこないよーーー ”)を警告ダイアログに表示します。 i = 1; alert str[i]; 次の例は配列の中身を順番に警告ダイアログに表示します。 for (i = 0; i < 3; i++) alert str[i]; このように、配列は連続した処理には欠かせません。
- peso
- ベストアンサー率41% (40/97)
自分なりに簡単にできるところはなるべく簡単にするようにしてみました。 （変わりすぎ？？） このような場合は配列を使うと比較的簡単に出来ます。 ↓では配列の要素を追加するだけで（str[4] = ・・・,str[5] = ・・・のように）表示する文字列の数を増やしたり減らしたり出来ます。 <head> <script language="javascript"> <!-- //打ち出される文字は配列strに格納 var str = new Array(); str[0] = "わしはしばらく出てこないよーーー "; str[1] = "しばらく出てこないよーーー "; str[2] = "出てこないってばーーー "; var timespd = 50;//タイマーの速さ var maxrow = str.length; //strの要素の数を格納 var rowcnt = 0; //現在表示中のstrの添字 var msg = ""; //実際に表示される文字を一時的に格納 var i = 1; //今msgに格納されている文字数 var timeID; //タイマー制御用 function type(){ if (i <= str[rowcnt].length){ msg = str[rowcnt].substr(0, i); if (i & 1) msg += "＿";// i （今表示する文字数）が奇数だったら＿を付け加える i++; } else{ i = 1; rowcnt = (rowcnt + 1) % maxrow;//次に表示するstrの添字の決定 msg = ""; } if (document.all){ myText.innerHTML = msg; } else if (document.layers){ document.myText.document.open(); document.myText.document.clear(); document.myText.document.write(msg); document.myText.document.close(); } clearTimeout(timeID); timeID = setTimeout("type()",timespd); } //--> </script> </head> <body bgcolor="#cccccc" onload="type()"> <div id="myText" style="position:absolute;top:20;left:20;"></div> </body>
お礼
ありがとうございます。 配列は以前、嫌な思いをしたもので.... それから配列と聞くと体が避けていくんですよね。 ですが、pesoさんのスクリプトの方が、表示時間を同じに してるのに、表示が速いですね。 やっぱりちゃんと配列を覚えたほうがよさそうですね。 でも体が......
関連するQ&A
- 文字を一文字ずつ表示
JavaScriptで文字を一文字ずつ表示するサンプルを見つけ、使おうとしたところdocument.allが使われていた為、ネスケで対応できない事が分かりました。ネスケ4.7で対応するようにするにはどのように変えたらいいのか教えて頂きたく宜しくお願いいたします。 <SCRIPT Language="JavaScript"> <!-- var msg="Welcome!!"; i=0; function Start(){ if(i<=msg.length){ if(document.all){ myText.innerHTML = msg.substring(0,i); }else if(document.layers){ document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; setTimeout("Start()",200); }else{ i=0; setTimeout("Start()",1000); } } // --> </SCRIPT> </HEAD> <BODY onLoad="Start()"> <DIV id="myText"></DIV> </BODY> 宜しくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptの文字表示速度
こんにちは。 JavaScriptの事でお聞きしたい事があります。 まではこれを見てください。 <SCRIPT language="JavaScript"> <!-- msg = "ここにメッセージを入力すると、途中から少しだけ早くなる"; stcnt = 0; wid =60; blnk = ""; for(i=0; i<wid; i++) blnk += " "; str = blnk + msg ; timeID = 10; function scroller() { document.guide.message.value = str.substring(stcnt++,stcnt+wid); if (stcnt>msg.length + wid) stcnt=0; clearTimeout(timeID); timeID = window.setTimeout("scroller()",100); } // --> </SCRIPT> -------------------- 文字を出したいところに <SCRIPT language="JavaScript"> <!----- document.write("<CENTER><FORM NAME='guide'>") document.write("<INPUT TYPE='text' NAME='message' SIZE=40></FORM></CENTER>") scroller(); // --> </SCRIPT> -------------- と張ります。 このスクリプトですが、htmlに張ると小さい文字表示の部分が出てきて 右から左にむかって文字が流れていきますが、途中から 文字の表示速度が速くなっています。 これてなぜか自分でもいろいろとやってみたのですが、いまいちよくわかりません。 説明をお願いできますでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- テキストボックスにスクロールする文字列を表示する。
テキストボックスにスクロールする文字列を表示する方法を知りました。^^ これはできたのですが、同じページで、「★メッセージ1」の他に 「別の表示」をさせたいのですがどうしたらいいんでしょうか? 例えば、「★メッセージ2」。など <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- msg="★メッセージ1 "; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",300); } //--> </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <FORM name="myform"> <INPUT name="mytext" size="20"> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- JavaScriptでの文字の流れる掲示板について
ホームページのJavaScriptで、「文字が流れる掲示板」のソースを下記に書きましたが、文字の色やFormの背景色などは、どのように変更したらよいでしょうか、分かりましたら教えてください。よろしくお願いします。 <FORM NAME="time"><INPUT TYPE="text" NAME="str" SIZE="100" ></FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- str = "helloword !!"; str = " " + str; i = 0; function tick() { document.forms['time'].elements['str'].value = str.substring(i, str.length) + str.substring(0, i); i = ++i % str.length; setTimeout("tick()", 120); } tick(); // --> </SCRIPT>
- ベストアンサー
- JavaScript
- テキストボックス途中で切れてしまう
テキストボックス内でスクロールする文字を作成したのですが、ＭＡＣのＩＥで見るとテキストボックスの途中で切れてしまいます。 msg="メッセージ"; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",200); } ＝＝ ＨＴＭＬ部分 ＝＝ <form name="myform"> <input type="text" style="border:0px #ffffff;width:493px; height:18; color:#000000; font-size:13px; background-color:#ffffff" name="mytext" size="95"> </form> ＝＝＝＝＝＝＝＝＝＝＝＝ 何か指定事項が足りないのでしょうか？
- ベストアンサー
- HTML
- ロリポブログで下の部分に流れるメッセージを作りたいのですが、どうしたらいいですか？
ロリポブログで、 <SCRIPT language="JavaScript"> <!-- msg=" ようこそ♪ お気に入りに追加してくださいね！ "; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); window.status=msg; setTimeout("scroll()",300); } //--> </SCRIPT> というスクリプトを<head></head>の間に入れてみたのですが、 うまくいきませんでした。 どのようにしたらよいか教えていただけますか？
- ベストアンサー
- JavaScript
- setTimeout関数の使用方法について
はじめまして。 質問があります。 以下のコードを実行すると、一定時間おきに文字の表示が変化する ように動いてくれません。何が問題なのかがまったく見当がつき ません。どなたかご指摘をお願いします。 ---------------------------------------------------------------- <html> <head> <title>setTimeout()関数の使用例</title> </head> <body onLoad="timer=setTimeout('changeChar()',500)"> <script type="text/javascript"> <!-- var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var cnt = 0; function changeChar() { clearTimeout(timer); ch = str.charAt(cnt++); document.write(ch); if(str.length > cnt) { timer = setTimeout("changeChar()",500); } } //--> </script> </body> </html> ----------------------------------------------------------------
- ベストアンサー
- JavaScript
- substringとlengthの連携コード
Smessage = Smessage.substring(2,Smessage.length) + Smessage.substring(0,2);の部分ですが、動きがイマイチわからないです。 substringで配列2つ目(= S2)とlengthで持ってきた値=4(だがsubstringの終了インデックスはその前の数字を考えるので3つ目= S3)を抜き出し、2つ目のsubstringで配列0番目(= S1)=と2番目(= S3)を抜き出し、 結果S2とS4 + S1とS3をSmessageに代入しているんですか？ 順番としてはS2が最初に来て次にS4、 S1最後にS3が来るのではないんですか？ でも実行結果はS1、S2、S3、S4と順番通りになっています。この辺が良くわかりません。 <!DOCTYPE HTML> <html><head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <script type="text/javascript"> <!-- var TC = 0 ; var S1 = "１つ目の空白 "; var S2 = "２つ目の空白 "; var S3 = "３つ目の空白 "; var S4 = "ここにメッセージ......。"; var Smessage = S1+S2+S3+S4; var timeID=setTimeout("",1) ; function Message() { if (TC < 1000) { TC++ ; window.status = Smessage; Smessage = Smessage.substring(2,Smessage.length) + Smessage.substring(0,2); clearTimeout(timeID) timeID = setTimeout("Message()",300); } else { window.status = " " } } //--> </script> <style type="text/css"> <!-- body { background-color: #AFEEEE; } --> </style> </head> <body onLoad="Message()"> ★ステータス行に文字を流してます </body></html>
- 締切済み
- JavaScript
- このタグの文字サイズを大きくしたいのですが、、、
<head> <title>１文字づつ画面上に出力する</title> <script language="JavaScript"><!-- str = "Sample text...(^^)/ By KaZuhiro FuRuhata"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); if (document.all) document.all["outText"].innerHTML = txt; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } // --></script> </head> <body> <a href="javaScript:setText1()">出力開始</a> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- このタグはグラデーションですが、文字が小さくて困っています。
<html> <head> <title>文字にグラデーションをかけ１文字ずつ出力する</title> <script Language="JavaScript"><!-- str = "■■■■■■■■■■■■■■■■■■■■■■■■■■"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); txt2 = gradTextConv(txt); if (document.all) document.all["outText"].innerHTML = txt2; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt2); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } function gradTextConv(sText) { p = 16 / str.length; str2 = ""; for (i=0; i<sText.length; i++) { pt = Math.floor(p*i); n = "0123456789ABCDEF".charAt(pt); c = "#"+n+n+"0000"; str2 = str2 + "<font color='"+c+"'>" + sText.charAt(i) + "</font>"; } return str2; } // --></script> </head> <body bgcolor="white" onload="setText1()"> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body> </html>
- ベストアンサー
- HTML
お礼
ありがとうございました。 おかげで作りたかったスクリプトができました。