有打字机效果呈现 但如何进行多段文字效果的连接?
时间: 2023-04-10 07:03:30 浏览: 86
您可以使用字符串拼接的方式将多段文字连接起来,例如使用加号(+)或字符串格式化函数(如sprintf)来实现。另外,您还可以使用JavaScript中的字符串模板(template literals)来实现多段文字的连接。
相关问题
js多段文字打字机效果
好的,对于 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 多段文字打字机效果。你可以根据需要进行修改和扩展。
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);
} else {
index = 0;
subIndex = 0;
typewriter.innerHTML = "";
setTimeout(type, speed); // 循环播放
}
}
type();
```
以上代码会将 `texts` 数组中的每一段文本逐个字符地打印到 `typewriter` 元素中,并在每段文本结束后换行,最后打印完最后一段文本后重新从第一段文本开始打印,实现了简单的 JS 多段文字打字机效果循环播放。你可以根据需要进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)