js多段文字打字机效果
时间: 2023-07-23 10:29:28 浏览: 147
js打字机效果
3星 · 编辑精心推荐
好的,对于 JS 多段文字打字机效果,可以使用数组来存储多段文本,然后逐个打印出来。以下是一个简单的实现方式:
HTML:
```html
<div id="typewriter"></div>
```
JS:
```javascript
var texts = [
"这是第一段待显示的文本。",
"这是第二段待显示的文本。",
"这是第三段待显示的文本。"
]; // 待显示的文本数组
var speed = 100; // 打字速度,单位为毫秒
var index = 0;
var subIndex = 0;
var typewriter = document.getElementById("typewriter");
function type() {
if (index < texts.length) {
if (subIndex < texts[index].length) {
typewriter.innerHTML += texts[index].charAt(subIndex);
subIndex++;
} else {
index++;
subIndex = 0;
typewriter.innerHTML += "<br>"; // 换行
}
setTimeout(type, speed);
}
}
type();
```
以上代码会将 `texts` 数组中的每一段文本逐个字符地打印到 `typewriter` 元素中,并在每段文本结束后换行,实现了简单的 JS 多段文字打字机效果。你可以根据需要进行修改和扩展。
阅读全文