js如何通过打字效果将div里的一句话逐个输出

2023-11-15 其他教程围观232次去下载

有时候，我们要实现通过打字效果将DIV里的一句话输出，该怎么做呢。下面是模板兔提供的一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
#typed-text {
  border-right: .15em solid orange;
  white-space: nowrap;
  overflow: hidden;
  font-size: 24px;
  animation: typing 4s steps(40, end);
}

@keyframes typing {
  from { width: 0 }
}

</style>
</head>
<body>
<div id="typed-text">这是一句话。</div>

<script>
const div = document.getElementById('typed-text');
const text = div.innerHTML;
div.innerHTML = '';

for(let i = 0; i < text.length; i++) {
  setTimeout(function(){
    div.innerHTML += text.charAt(i);
  }, i * 100);
}
</script>
</body>
</html>