コード
<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.
コメント