回答編集履歴
2
修正
answer
CHANGED
@@ -62,13 +62,13 @@
|
|
62
62
|
if(index > idea.length-1){ //setIntervalを止める条件
|
63
63
|
clearInterval(id);
|
64
64
|
}
|
65
|
-
},
|
65
|
+
}, 100); //100msecごとにdisplay_word()を実施
|
66
66
|
index=0; //初期化
|
67
67
|
}
|
68
68
|
//1文字表示する関数
|
69
69
|
var display_word = function(){
|
70
70
|
let title = document.getElementById('title');
|
71
|
-
title.innerHTML=idea[index]
|
71
|
+
title.innerHTML+=idea[index]
|
72
72
|
index++
|
73
73
|
}
|
74
74
|
|
@@ -78,7 +78,6 @@
|
|
78
78
|
}
|
79
79
|
</script>
|
80
80
|
</body>
|
81
|
-
|
82
81
|
```
|
83
82
|
|
84
83
|
以上です。
|
1
追記
answer
CHANGED
@@ -37,6 +37,48 @@
|
|
37
37
|
</body>
|
38
38
|
|
39
39
|
```
|
40
|
+
以上です。
|
40
41
|
|
41
42
|
|
43
|
+
###追記
|
44
|
+
勘違いしており、すいませんでした。
|
45
|
+
setTimeOutは非同期処理なので、処理が止まらないので、setIntervalで実現できますね。
|
46
|
+
AkitoshiManabe様が既にご回答されていると思いますが、私も、setIntervalを用いて、作ってみました。
|
47
|
+
|
48
|
+
```
|
49
|
+
<body>
|
50
|
+
<input id="text" type="text">
|
51
|
+
<button id="button">1文字ずつ表示</button>
|
52
|
+
<h1 id="title"></h1>
|
53
|
+
<script>
|
54
|
+
let idea=[]; //文字格納配列
|
55
|
+
var index = 0; //ループ変数
|
56
|
+
|
57
|
+
click=()=>{
|
58
|
+
let text = document.getElementById('text').value;
|
59
|
+
idea=text.split(""); //入力テキストを配列化
|
60
|
+
var id = setInterval(function(){
|
61
|
+
display_word(); //繰返し実行する関数指定
|
62
|
+
if(index > idea.length-1){ //setIntervalを止める条件
|
63
|
+
clearInterval(id);
|
64
|
+
}
|
65
|
+
}, 1000); //1秒ごとにdisplay_word()を実施
|
66
|
+
index=0; //初期化
|
67
|
+
}
|
68
|
+
//1文字表示する関数
|
69
|
+
var display_word = function(){
|
70
|
+
let title = document.getElementById('title');
|
71
|
+
title.innerHTML=idea[index]
|
72
|
+
index++
|
73
|
+
}
|
74
|
+
|
75
|
+
window.onload=()=>{
|
76
|
+
let button=document.getElementById('button');
|
77
|
+
button.addEventListener('click',click,false);
|
78
|
+
}
|
79
|
+
</script>
|
80
|
+
</body>
|
81
|
+
|
82
|
+
```
|
83
|
+
|
42
84
|
以上です。
|