JavaScriptでsetTimeout関数の使い方サンプルを作った。
titleに設定した文字列をStringクラスのcharAtで一文字ずつ先頭から取り出し、画面に表示している。
moji = title.charAt(pos);
途中からsetTimeout関数の実行間隔を早めている。
if(pos > 5) speed = 200; setTimeout(lupin, speed);
関数lupinの中でsetTimeout関数を使って設定ミリ秒後に再度lupin関数を呼び出している。これは再帰という方法だ。
JavaScript部分全体
var title = "ロシアより愛をこめて"; var speed = 350; var color = "#fff"; var background = "#f00"; var size = "480px"; var pos = 0; function init(){ document.body.style.backgroundColor = background; document.getElementById("lupin").style.color = color; document.getElementById("lupin").style.fontSize = size; lupin(); } function last(){ var message = document.getElementById("lupin"); message.style.fontSize = "128px"; message.style.textAlign = "center"; message.innerHTML = title; } function lupin(){ var message = document.getElementById("lupin"); moji = title.charAt(pos); message.innerHTML = moji; pos++; if(pos > title.length){ last(); } if(pos > 5) speed = 200; setTimeout(lupin, speed); }
ところで、ルパン三世は、日本漫画の名作だと思う。