一，效果
二，代码
1，搭个框架
创建一个显示内容的框框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect with Blinking Cursor</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.typewriter-container {
width: 600px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.typewriter-text {
font-size: 18px;
line-height: 1.5;
margin: 0;
display: inline;
}
</style>
</head>
<body>
<div class="typewriter-container">
<p id="typewriter-text" class="typewriter-text">11111111111111111</p>
<span class="typewriter-cursor"></span>
</div>
</body>
</html>
- 设置页面布局，使内容居中。
- 为容器添加样式，使其看起来像一个卡片。
- 设置文本的基本样式。
2，添加光标样式和动画
在文本的末尾添加一个少说的光标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect with Blinking Cursor</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.typewriter-container {
width: 600px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.typewriter-text {
font-size: 18px;
line-height: 1.5;
margin: 0;
display: inline;
}
.typewriter-cursor {
display: inline-block;
width: 10px;
height: 5px;
background-color: #333;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: bottom;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="typewriter-container">
<p id="typewriter-text" class="typewriter-text">1111111111111</p>
<span class="typewriter-cursor"></span>
</div>
</body>
</html>
- 设置光标的样式，使其看起来像一个小矩形。
- 添加
blink动画，使光标闪烁。
效果：
3，实现打字效果
使用JavaScript将内容不断添加到已存在的内容的末尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect with Blinking Cursor</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.typewriter-container {
width: 600px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.typewriter-text {
font-size: 18px;
line-height: 1.5;
margin: 0;
display: inline;
}
.typewriter-cursor {
display: inline-block;
width: 10px;
height: 5px;
background-color: #333;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: bottom;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="typewriter-container">
<p id="typewriter-text" class="typewriter-text"></p>
<span class="typewriter-cursor"></span>
</div>
<script>
const text = "欢迎使用逐字显示的打字机效果！这个效果类似于 ChatGPT 的回复方式，可以增加用户体验的生动性和互动感。现在，我们在末尾添加了一个持续闪烁的光标。";
let charIndex = 0;
function typeWriter() {
if (charIndex < text.length) {
document.getElementById("typewriter-text").innerHTML += text.charAt(charIndex);
charIndex++;
let typingSpeed = Math.floor(Math.random() * (300 - 50 + 1)) + 50; // 模拟人类打字速度
setTimeout(typeWriter, typingSpeed);
}
}
// 开始打字效果
window.onload = typeWriter;
</script>
</body>
</html>
- 定义要显示的文本。
- 创建
typeWriter函数，该函数:- 检查是否还有字符需要显示。
- 如果有，将下一个字符添加到文本中。使用
innerHTML追加文本，而不是每次都重新设置整个内容，这在处理长文本时更高效。 - 增加字符索引。
- 生成一个随机的打字速度，模拟人类打字。
- 使用
setTimeout安排下一个字符的显示。
- 当页面加载完成时启动打字效果。
三，实现类chatgpt内容输出的前后端代码
使用 Express.js 和 WebSocket 来实现一个更动态的打字机效果，其中内容从服务器逐步推送到前端。这种方法可以用于实时聊天、动态内容展示等场景。
服务器端代码（使用 Express 和 ws 库）：
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const path = require('path');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({
server});
// 提供静态文件
app.use(express.static(path.join(__dirname, 'public')));
// WebSocket连接处理
wss.on('connection', (ws) => {
console.log('Client connected');
// 要发送的文本
const text = "这是一个使用WebSocket实现的打字机效果。服务器会逐字符地将内容推送到前端，然后在前端以打字机效果展示出来。这种方法可以用于实时聊天、动态内容展示等多种场景。";
let index = 0;
// 定义发送字符的函数，一次随机延迟 500~1000 毫秒，随机发送1~5个字符
function sendNextChar() {
setTimeout(() => {
const count = Math.floor(Math.random() * 5) + 1;
ws.send(text.slice(index, index + count));
index += count;
if (index < text.length) {
sendNextChar();
}
}, Math.floor(Math.random() * 500) + 500);
}
// 开始发送
sendNextChar();
ws.on('close', () => {
console.log('Client disconnected');
});
});
const PORT = process.env.PORT || 3001;
server.listen(PORT, () => {
console.log(`Server is running on port ${
PORT}`);
});
客户端代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket打字机效果</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.typewriter-container {
width: 600px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.typewriter-text {
font-size: 18px;
line-height: 1.5;
margin: 0;
display: inline;
}
.typewriter-cursor {
display: inline-block;
width: 10px;
height: 20px;
background-color: #333;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: middle;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="typewriter-container">
<p id="typewriter-text" class="typewriter-text"></p>
<span class="typewriter-cursor"></span>
</div>
<script>
const socket = new WebSocket('ws://localhost:3001');
const textElement = document.getElementById('typewriter-text');
socket.onmessage = (event) => {
textElement.innerHTML += event.data;
};
socket.onclose = () => {
console.log('WebSocket连接已关闭');
};
socket.onerror = (error) => {
console.error('WebSocket错误:', error);
};
</script>
</body>
</html>
效果：
