使用htmljs并用递归的方式接口返回的直接是一个一个字的文字让文字像输入的一样一个一个展示
<!DOCTYPE html>
<html>
<head>
<title>Recursive Text Display</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
font-size: 24px;
line-height: 1.5;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<pre><code> #text {
border: none;
outline: none;
background-color: transparent;
display: inline-block;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 0;
}
#cursor {
display: inline-block;
width: 10px;
height: 30px;
background-color: #333;
margin-left: 5px;
animation: blink 0.6s infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
</style>
</code></pre>
</head>
<body>
<div id="text"></div>
<div id="cursor"></div>
<pre><code><script>
// Replace this URL with your own API endpoint that returns the text to display
const apiUrl = 'https://your-api-endpoint.com/text';
const textElement = document.getElementById('text');
const cursorElement = document.getElementById('cursor');
let text = '';
const displayText = async (index = 0) => {
const response = await fetch(apiUrl);
const data = await response.text();
text += data[index];
textElement.textContent = text;
if (index < data.length - 1) {
setTimeout(() => {
displayText(index + 1);
}, 50);
} else {
cursorElement.style.display = 'none';
}
};
displayText();
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/4nC 著作权归作者所有。请勿转载和采集!