文字を１文字ずつ表示させるには？

タイトルの通りです
検索をかけてみたのですが解決に至らなかったので質問させて頂きます

以下は自分で考えたコードです
ご指摘お願いします

追記
テキストボックスは使わずにdocument.writeで出力できるようにしたいです

lang
1<form name="timer">
2<input type="button" value="スタート" onclick="startfnc()"><br>
3</form>
4
5<script>
6
7function hyoji()
8{
9//表示する文字
10var str = "一文字ずつ表示します。";
11
12//文字数
13var cnt = 11;
14
15//文字が全部表示されているか確認
16if ( cnt < 11 )
17{
18//現在より１文字多く切り出して表示
19document.write( str.substr(0,cnt+1) );
20}
21else
22{
23//全て表示されたら、空文字に戻す
24document.timer.str.value = "";
25}
26}
27
28
29function startfnc()
30{
31//関数hyoji()を１０００ミリ秒間隔で呼び出す
32setInterval("hyoji()",1000);
33}
34
35</script>
36

行動規範の内容に同意します

回答2件

ベストアンサー

追記
テキストボックスは使わずにdocument.writeで出力できるようにしたいです

それは無理かなって。
HTML5でも非推奨なので、無理に使わない方がいいかなって。

で、以下、貴方のコードをできるだけ活かしたサンプル。

lang
1<!DOCTYPE html> 
2<html lang="ja"> 
3    <head> 
4        <meta charset="utf-8"> 
5        <title>サンプル</title>
6<script>
7
8var str = "一文字ずつ表示します。";
9var cntmax = str.length;
10var cnt = 0;
11
12function hyoji()
13{
14	if ( cnt < cntmax )
15	{
16		//現在より１文字多く切り出して表示
17		cnt = cnt + 1;
18		document.body.innerHTML = ( str.substr(0, cnt) );
19	}
20	else
21	{
22		//全て表示されたら、空文字に戻す
23		document.body.innerHTML = "";
24		cnt = 0;
25	}
26}
27
28function startfnc()
29{
30	//関数hyoji()を１０００ミリ秒間隔で呼び出す
31	setInterval("hyoji()", 1000);
32}
33
34</script>
35    </head> 
36    <body> 
37		<input type="button" value="スタート" onclick="startfnc()"><br>
38    </body>
39</html>

投稿2015/04/01 12:26

退会済みユーザー

総合スコア0

ご指摘お願いします

というのは、何を期待しているのかしら。
あなたのコードを土台として、実際に動作するサンプルが欲しいということ？
考え方のヒントがほしいということ？

投稿2015/04/01 07:02

chokojori

総合スコア971

naia

2015/04/01 07:05

できれば動くサンプルが欲しいのですが理解を深めるために考え方のヒントも欲しいです

chokojori

2015/04/01 07:14

端的に言えば、setIntervalを使う場合、一定間隔で同一関数を繰返し呼ぶことになります。であれば、今回表示すべき文字は何文字目の文字なのかを示す変数が必要になります。

chokojori

2015/04/01 23:23

たとえば、こんな感じでしょうか。 <body> <p id="result"></p> <form name="timer"> <input type="button" value="スタート" onclick="startfnc()"><br> </form> <script type="text/javascript"> var hyoji_pos = 0; function hyoji(str) { document.getElementById("result").innerHTML = str.substr(hyoji_pos,1); hyoji_pos = (hyoji_pos + 1) % str.length; } function startfnc() { //関数hyoji()を１０００ミリ秒間隔で呼び出す setInterval("hyoji('一文字ずつ表示します。')",1000); } </script> </body>

行動規範の内容に同意します

あなたの回答