javascriptで文字を一文字ずつ表示させる

FrontEnd
スポンサーリンク

コード


<div>
	<p id="typing" >
		これは1文字ずつ表示するjavaScriptです。
		これは1文字ずつ表示するjavaScriptです。
		これは1文字ずつ表示するjavaScriptです。
	</p>
</div>
<script type="text/javascript">
	function typing(str = ""){
		var buf = document.getElementById("typing").innerHTML;
		var writed = buf.length;
		var write = "";
		if(writed < str.length){
			write = str.charAt(writed);
		}else{
			buf = "";
		}
		document.getElementById("typing").innerHTML = buf + write;
	}

	const str = document.getElementById("typing").innerHTML;
	const delay = 50;

	document.getElementById("typing").innerHTML = "";
	window.setInterval(function(){typing(str);}, delay);
</script>

DEMO

See the Pen typing by sin-o-pg (@sin-o-pg) on CodePen.

コメント

タイトルとURLをコピーしました