js多段文字打字机效果循环
时间: 2023-07-07 21:35:33 浏览: 98
好的,如果你需要实现循环播放多段文字打字效果,可以在打印完最后一段文本后重新从第一段文本开始打印。以下是一个简单的实现方式:
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);
} else {
index = 0;
subIndex = 0;
typewriter.innerHTML = "";
setTimeout(type, speed); // 循环播放
}
}
type();
```
以上代码会将 `texts` 数组中的每一段文本逐个字符地打印到 `typewriter` 元素中,并在每段文本结束后换行,最后打印完最后一段文本后重新从第一段文本开始打印,实现了简单的 JS 多段文字打字机效果循环播放。你可以根据需要进行修改和扩展。
阅读全文