<!DOCTYPE html>
<html>
<head>
<title>Content Streaming</title>
</head>
<body>
<p id="output"></p>
<P id="text"></P>
<script>
// 方案一
var text = "这是要流式输出的内容。";
var index = 0;
var outputElement = document.getElementById("output");
function streamOutput() {
if (index < text.length) {
var currentText = text.substring(0, index + 1);
outputElement.textContent = currentText;
index++;
} else {
clearInterval(timer);
}
}
var timer = setInterval(streamOutput, 100); // 每100毫秒输出一个字符
// 方案二 (正式版)
var textStr = "这是要流式输出的内容。";
var indexNum = 0;
var textElement = document.getElementById("text");
function showNextLetter() {
if (indexNum < textStr.length) {
textElement.innerHTML += textStr.charAt(indexNum);
indexNum++;
setTimeout(showNextLetter, 200); // 设置延迟时间,控制字母出现的速度
}
}
showNextLetter(); // 开始流式输出
</script>
</body>
</html>
js实现流式输出内容
于 2023-06-25 10:43:30 首次发布