いろいろなサイトを勉強のため、見回っていると文字列の表示で工夫をしているところが多かったので自分でも試してみました。
ボタンを押すと文字列が表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
var txt = document.getElementById('txt'); //文字を表示、ランダムな文字の後に「penguin」と表示される setText(txt, "penguin"); //一文字一文字、ランダムな文字を表示した後に表示する function setText(targetText,viewText){ var counter = 0; var ary = divText(viewText); var resultText=""; var timerId = setInterval(function(){ resultText += randomText(targetText, ary[counter],resultText); counter++; if(counter == ary.length){ clearInterval(timerId); } }, 300); } //ランダムな一文字を指定回数表示し、指定した一文字を表示する function randomText(text, result, resultText){ var counter = 0; var timerId = setInterval(function(){ rand = Math.floor(Math.random()*93)+33; text.innerText = resultText +String.fromCharCode(rand); counter++; if(counter==10){ clearInterval(timerId); text.innerText = resultText + result; } },30); return result; } //文字列を分割して配列に格納する function divText(text){ var ary = []; ary=text.split(''); return ary; } |
