サウンドノベルのように1文字ずつ表示する
説明
サウンドノベルのように1文字ずつ表示するにはタイマー(setTimeoutやsetInterval)を使って一定時間ごとに文字を表示する関数を呼び出します。関数内では文字列の指定範囲を抜き出して画面に出力します。1文字ずつ表示するには文字を抜き出す範囲を1つずつ増やしていきます。
サンプルプログラム
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>1文字ずつ表示する</h1>
<form>
<input type="button" value="表示開始" id="startDisplay">
</form>
<div id="msg"></div>
</body>
</html>
【スクリプト】
window.onload = function(){
document.getElementById("startDisplay").onclick = function(){
var txt = "むかしむかし、あるところに爺さんと婆さんが住んでいました。";
txt += "お爺さんは川に魚釣り、お婆さんは家で昼寝をしていました。";
count = 0;
clearTimeout(timerID);
timerID = setTimeout(function(){
document.getElementById("msg").innerHTML = txt.substr(0, count++);
if (count > txt.length){ return; }
timerID = setTimeout(arguments.callee, 80);
}, 80);
}
}
// 文字表示用のカウンタ
var count = 0;
// タイマーID
var timerID = null;