JS模拟机打效果，逐个字显示，并排除br标签
4829次阅读
205人点赞
发布时间: 2024-05-24 15:21:26
扫码到手机查看
![]()
代码实现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟打印效果</title>
<style>
#output {
white-space: pre-wrap; /* 保留空白和换行符 */
}
</style>
</head>
<body>
<div id="output"></div>
<script>
// 要打印的文本，包含<br>标签
const text = '第一行文本<br>第二行文本<br>第三行文本';
// 当前字符的索引
let index = 0;
// 打印速度（毫秒数）
const typingSpeed = 100;
// 定时器ID，用于停止定时器
let timerId;
// 打字函数
function typeText() {
// 获取输出元素
const outputElement = document.getElementById('output');
// 如果索引小于文本长度，继续打字
if (index < text.length) {
// 获取当前字符
const char = text.charAt(index);
// 检查是否为<br>标签的开始
if (char === '<' && text.substr(index, 4) === '<br>') {
// 插入换行符或创建新的HTML元素
outputElement.innerHTML += '<br>';
index += 3; // 跳过<br>
} else {
// 输出当前字符
outputElement.innerText += char;
}
// 索引增加
index++;
} else {
// 所有字符已打印，停止定时器
clearInterval(timerId);
}
}
// 开始打字效果
timerId = setInterval(typeText, typingSpeed);
</script>
</body>
</html>实现简单的机打效果
在JavaScript中，你可以使用setInterval函数来实现模拟打字效果。以下是一个简单的例子：
javascript
// 要打印的文本
const text = 'Hello, World!';
// 当前字符的索引
let index = 0;
// 打印速度（毫秒数）
const typingSpeed = 100;
// 定时器ID，用于停止定时器
let timerId;
// 打字函数
function typeText() {
// 获取输出元素，例如一个<span>或<p>
const outputElement = document.getElementById('output');
// 如果索引小于文本长度，继续打字
if (index < text.length) {
// 输出当前字符
outputElement.innerText += text.charAt(index);
// 索引增加
index++;
} else {
// 所有字符已打印，停止定时器
clearInterval(timerId);
}
}
// 开始打字效果
timerId = setInterval(typeText, typingSpeed);
html
<span id="output"></span>数据源是数组情况下，输出数据
const typedText = document.getElementById('typed-text');
const textLines = [
'这是第一行文本。',
'紧接着是第二行。',
'现在显示第三行。',
// ... 添加更多行文本
];
let currentIndex = 0;
let currentLine = '';
function type() {
if (currentIndex < textLines.length) {
if (currentLine.length < textLines[currentIndex].length) {
// 追加下一个字符
currentLine += textLines[currentIndex][currentLine.length];
typedText.textContent = currentLine;
// 稍微延迟一下，模拟键入效果
setTimeout(type, 100);
} else {
// 如果当前行已经打完，则开始下一行
currentIndex++;
currentLine = '';
type(); // 递归调用自身以继续下一行
}
}
}
// 开始打字效果
type();
目录