技術資料

error この記事は最終更新日から2年以上が経過しています。

chatGPTが教えてくれたスクリプトが汎用性ありそうなので、一旦メモ。

// メッセージを順次表示する関数
function showMessage(message) {
	// メッセージを1文字ずつ区切って、spanタグで囲んで配列に変換する
	var chars = message.split("");
	var spans = $.map(chars, function(char) {
	return "<span>" + char + "</span>";
	});

	// メッセージを順次表示するための再帰関数
	function showNextChar(i) {
	if (i < spans.length) {
		$(".message-box").append(spans[i]);
		setTimeout(function() {
		showNextChar(i+1);
		}, 50); // 50ミリ秒ごとに1文字表示する
	}
	}

	// メッセージボックスをクリアしてから、メッセージを表示する
	$(".message-box").empty();
	showNextChar(0);
}

// テスト用のメッセージを表示する
showMessage("Hello, world!");

1文字ずつ区切った後、 span で囲む処理は必要なのか微妙ではある。