Js 如何实现一个类似 chatGPT 打字机效果

在使用chatGPT的时候,会有一个打字机的效果,以下是分别使用原生Js和Vue实现

原生 JS 实现

如下是示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Printer 打字机效果</title><style>* {margin: 0;border: 0;padding: 0;font-family: "Courier New", Courier, monospace;}#window {width: 600px;height: 400px;background-color: black;margin: 100px auto;box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);}#title-bar {width: 595px;height: 20px;line-height: 20px;padding-left: 5px;font-size: 14px;background-color: #eee;font-family: Consolas, serif;}#title-bar span:before {content: "\25cf";}#title-bar span {font-size: 24px;}#close {color: red;}#min {color: yellow;}#max {color: #00FF00;}tilte-title {font-family: 'Arial Black', SimHei;font-weight: bold;}#show-board {width: 580px;height: 360px;background-color: #333;color: #eee;padding: 10px;font-family: "Courier New", Courier, monospace, Consolas, serif;}</style>
</head><body><div id="window"><div id="title-bar"><span id="close"></span><span id="min"></span><span id="max"></span><strong id="tilte-title">&nbsp;Console</strong></div><div id="show-board"></div></div><script>(function(root, factory){if(typeof define === 'function' && define.amd){define([], factory);}else{root.Printer = factory(root);}
}(this, function(root){var Printer = {};Printer.printer = {"version": "0.0.1"};var init_options = {"speed" : 50,  //文字的速度"selector" : 'canvas',  //要打印到的标签的ID   "startIndex" : 0,  //从第几个字符开始打印"endIndex" : 0,  //打印到第几个字符结束"hasCur" : true,  //是否有光标"curId" : 'cur',  //光标的ID"curStr" : '_',  //光标字符"curStyle" : 'font-weight: bold;', //光标的样式（CSS样式）"curSpeed" : 100,  //光标的速度（ms）"lnStr": ""};var str = "", options = init_options;var flwCurTimer, dom, curObj, reStr='', curSwitch,index=0;Printer.init = function(arg_str, arg_options){str = arg_str;for( var option in arg_options ){options[option] = arg_options[option];}dom = document.getElementById(options.selector);index = options.startIndex;options.endIndex = options.endIndex == 0 ? str.length : options.endIndexoptions.hasCur && flwCur();return this;}Printer.print = function(){ //打印函数for(var i=0; i<str.length; i++) {(function(index){setTimeout(function(){ if (str.charAt(index) === '\n'){reStr += '<br>' + options.lnStr;} else {reStr += str.charAt(index);}dom.innerHTML= options.lnStr + reStr}, options.speed * (index + 1))})(i);}setTimeout(function(){if(options.hasCur){var element = document.createElement("span");element.id = options.curIddom.appendChild(element);curObj = document.getElementById(options.curId);clearTimeout(flwCurTimer);setInterval(chCur, options.curSpeed);}}, options.speed * str.length)}function flwCur(){ //跟随光标dom.innerHTML += '<span id="'+options.curId+'" style="'+options.curStyle+'">'+options.curStr+'</span>';flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);}function chCur(){ //闪烁光标curObj.innerHTML = curSwitch ? options.curStr : "";curSwitch = !curSwitch}return Printer;
}));</script><script>var str = 'itclanCoder\n';str += 'https://coder.itclan.net\n';str += '书以启智,技于谋生,活出斜杠\n';str += '微信公众号:itclanCoder\n';str += 'exit\n';Printer.init(str, {selector: 'show-board',lnStr: 'root@itclanCoder ~/ # '}).print();</script>
</body></html>

#Vue版本实现

如下是使用vue方式实现

<template><div class="daziji-box"><div class="content"></div><div class="textarea"><textarea v-model="message" placeholder="请输入文字后回车看看效果" @keydown.enter="handleEnter"></textarea></div></div>
</template><script>
export default {data () {return {msg:'你好，我是模仿ChatGPT的打字机效果',message:'',}},mounted() {this.autoWriting(0)},methods:{handleEnter() {event.preventDefault();//阻止enter键回车换行this.msg=this.messageconst dom = document.querySelector('.content')dom.innerHTML = ''this.writing(0)this.message=''},autoWriting(index){const dom = document.querySelector('.content')const data = this.msg.split('')if (index < data.length) {dom.innerHTML += data[index]setTimeout(this.autoWriting, 200, ++index)}}}
}
</script><style>.daziji-box .content {margin: 20px 0;
}    
.daziji-box .content::after{content: '_';animation: blink 1s infinite
}
@keyframes blink{from{opacity: 0;}to{opacity: 1;}
}</style>

分析

实现这个打字机的效果,核心逻辑,主要是在autoWriting这个方法的实现,页面初始化加载自动打印

通过setTimeout设置200毫秒的时间间隔，每隔200毫秒向dom中插入对应的数据,先将输入的字符串进行打散(split),然后一个一个插入到DOM节点

至于那个光标闪烁,是通过一个伪类after将光标定在这个class的最后面，并使用动画的关键帧,实现显示隐藏的循环动画，模拟光标的闪烁

来自爱客来智能助手答案

以下是爱客来智能助手的回答

实现类似 chatGPT 打字机效果的方法可以通过 JavaScript 的 setTimeout 方法和字符串截取来实现，步骤如下：

将要打印的文本内容存储到一个字符串变量中；
通过 DOM 操作，找到需要输出的文本区域；
设置一个变量用于记录当前输出的字符数，初始值为 0；
设置一个变量用于存储 setTimeout 方法的返回值，初始值为 null；
使用 setTimeout 方法，每隔一定时间截取文本字符串前面的 n 个字符并显示到文本区域中，同时更新当前输出的字符数；
当输出完整个文本字符串后，停 setTimeout 方法。以下是具体代码实现：

const text = "这是要输出的文本内容，类似PT 的打字效果"; 
const typing = () => { const output = document.getElementById("output");
let count = 0; 
let timer = null; const print = () => {const subText = text.substring(0, count + 1); output.textContent = subText; count++; if (count === text.length) {clearTimeout(timer); 
} else {timer = setTimeout(print, 50); // 每隔 50 毫秒输出一个字符 } 
}; print(); 
}; 
typing();

这段代码会在页面载入时自动执行 typing 函数，实现类似 chatGPT打字机效果的效果。同时，可以通过更改 setTimeout 方法的第二个参数以调整打印速度

以下也是爱客来智能助手另外一个答案

要实现类似 chatGPT 打字机效果，我们需要用 ·JavaScript· 来模拟打字过程。下面是一个简单的实现方法：

定义一个字符串，表示要打出的完整文本。比如：const text = "Hello, world!"。
将该字符串转化为一个字符数组。比如：const characters = text.split("")。
定义一个计数器变量，表示已经显示出来的字符数。初始值为 0。
创建一个定时器，每隔一定时间（比如 100ms）将下一个字符显示出来。可以使用 setInterval 函数实现。
在每次定时器回调函数中，使用 slice 函数从字符数组中取出前 counter + 1 个字符拼接成一个新字符串，然后将该字符串设置为要在页面上显示的文本。例如：document.getElementById("text").innerText = characters.slice(0, counter + 1).join("")。
在每个定时器回调函数中，将计数器加 1。
当计数器等于字符数组的长度时，停止定时器。例如：if (counter === characters.length) clearInterval(timer)。

下面是一份示例代码：

const text = "Hello, world!";
const characters = text.split("");
let counter = 0;
const speed = 100; // 打字的速度，单位为毫秒const timer = setInterval(() => {// 拼接出当前应该显示的文本const currentText = characters.slice(0, counter + 1).join("");// 将文本显示在页面上document.getElementById("text").innerText = currentText;// 增加计数器counter++;// 如果已经显示完全部字符，停止定时器if (counter === characters.length) {clearInterval(timer);}
}, speed);

需要注意的是，这只是一个简单的实现方法，还有很多细节需要考虑，比如打字结束后是否要添加一些额外的操作，比如将光标移动到另一个位置等等。